vue.config.js中vue的配置

文件中Webpack配置

在vue.config.js中,vue-cli官網上先去看關於webpack的配置

 

 在文檔中有這么一句話:“

調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個對象,該對象將會被 webpack-merge 合並入最終的 webpack 配置

”

這句話的理解就是,我們在configureWebpack內部寫上我們的webpack配置會自動合並到webpcak配置文件中,具體的webpack配置方法就去查看webpack官網

如下別名的例子,會教你如何看官方文檔

別名

1.去查vue.config.js的指南,找到關於webpack的配置項,從而知道我們的別名配置要寫在configureWebpack中

2.去查webpack官網,找到別名解析這一塊內容

 

3.根據步驟1和2,最終在vue.config.js中配置如下

const path=require('path');
module.exports={
    configureWebpack:{
        resolve:{
            alias:{
                '@':path.resolve(__dirname,'./src'),                           
 　　　　　　　　　'@components':path.resolve(__dirname,'./src/components')
            }
        }
    }
    
}

4.重啟,測試:在App.vue中引入components下的組件

import DInput from '@components/DInput/index'

5.@components路徑可以順利解析

 

熱更新

vue-cli中是默認熱更新的,保存后自動刷新.想想平常vue的數據動態更新