vue.config.js 學習記錄
Vue-cli4 將webpack 深度整合，不對外展示webpack 具體配置，在vue.config.js 中可以更改配置：
Vue.config.js 的基本內容為：
module.exports = {
publicPath: '/smart-dispatch-h5/', // 專案根路徑
outputDir: 'dist', // 生產環境構建檔案的目錄
assetsDir: 'static', // outputDir 的靜態資源 (js、css、img、fonts) 目錄
lintOnSave: !IS_PROD,
productionSourceMap:
}
① productionSourceMap：設定生產環境的 source map 開啟與關閉。
Type: boolean
Default: true
什麼是 source map?
source map 直譯過來就是資源地圖。所以，source map的作用就是定位。source map定位的時瀏覽器控制檯輸出語句在專案檔案的位置。
可以看出，開啟productionSourceMap後，瀏覽器控制檯明確的告訴我們test這條結果的輸出語句在main.js的20行。這就是source map的作用，對於開發人員差錯時非常有用的。
② prefetching：webpack4.6.0以上支援prefetching 特性
prefetch 是一種 resource hint，用來告訴瀏覽器在頁面載入完成後，利用空閒時間提前獲取使用者未來可能會訪問的內容。這樣子，豈不是和路由懶載入的理念衝突了嗎？
那就把prefetch給關了吧：
// vue.config.js
module.exports = {
chainWebpack: config => {
// 移除 prefetch 外掛
config.plugins.delete('prefetch')
// 移除 preload 外掛
config.plugins.delete('preload')
}
}
③ preloading：webpack4.6.0以上支援preloading 特性
preloading是一種 resource hint，用來指定頁面載入後很快會被用到的資源，所以在頁面載入的過程中，我們希望在瀏覽器開始主體渲染之前儘早 preload。
錯誤的使用webpackPreload實際上會影響效能，因此要謹慎使用。
如果把一個體積巨大的資源放在最高優先順序載入，頁面可能會長時間空白，使用者體驗體驗非常差，因此，謹慎使用。
總結：
懶載入優化了首屏載入的速率
prefetch預載入優化了子頁面載入的速率
④ preserveWhitespace 是 compilerOptions物件中的屬性之一。如果設定為false,標籤之間的空白將會忽略，這可能會導致效能稍好，但可能會影響嵌入式元素的佈局。true表示編譯的渲染函式將會保留HTML標記之間的所有空白字元。
如何使用？
在vue.config.js檔案中新增如下程式碼：
// set preserveWhitespace
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
⑤ runtimeChunk
根據路由驅動頁面的 runtime 程式碼預設情況是包含在 build 後的 app.hash.js 內的，如果我們改動其他路由，就會導致 runtime 程式碼改變。從而不光我們改動的路由對應的頁面 js 會變，含 runtime 程式碼的 app.hash.js 也會變，對使用者體驗是非常不友好的。
為了解決這個問題要設定 runtime 程式碼單獨抽取打包。
script-ext-html-webpack-plugin
但是 runtime 程式碼由於只是驅動不同路由頁面的關係，程式碼量比較少，請求 js 的時間都大於執行時間了，所以使用 script-ext-html-webpack-plugin 外掛將其內鏈在 index.html 中比較友好。所有這兩個一般配合使用。
chainWebpack：
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}
])
.end()
config.optimization.runtimeChunk('single')
⑥ splitChunks
如果使用了某些長期不會改變的庫，像 element-ui ，打包完成有 600 多 KB ，包含在預設 vendor 中顯然不合適，每次使用者都要載入這麼大的檔案體驗不好，所以要單獨打包：
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
// cacheGroups 下可以可以配置多個組，每個組根據 test 設定條件，符合 test 條件的模組
commons: {
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3, // 被至少用三次以上打包分離
priority: 5, // 優先順序
reuseExistingChunk: true // 表示是否使用已有的 chunk，如果為 true 則表示如果當前的 chunk 包含的模組已經被抽取出去了，那麼將不會重新生成新的。
},
node_vendors: {
name: 'chunk-libs',
chunks: 'initial', // 只打包初始時依賴的第三方
test: /[\\/]node_modules[\\/]/,
priority: 10
},
vantUI: {
name: 'chunk-vantUI', // 單獨將 vantUI 拆包
priority: 20, // 數字大權重到，滿足多個 cacheGroups 的條件時候分到權重高的
test: /[\\/]node_modules[\\/]_?vant(.*)/
}
}
})
⑦ 配置多個代理的注意點
在Vue專案的開發過程中,為了本地除錯方便，我們通常會在 vue.config.js 中配置 devServer 來在本地啟動一個伺服器，在這個選項中，我們會配置proxy 屬性來將指向到本地的請求（例如： /api/action） 代理到後端的開發伺服器上（例如： http://xxx.xxx.xxx/api/action）
在這個配置中，要注意以下兩點：
介面地址有重疊地址時，將匹配度低的放在後面。
例如：
* 將 / 匹配到 192.191.1.1;
* 將 /api 匹配到 192.191.1.2
* 將 /api/action 匹配到 192.191.1.3
如果我們像下面一樣書寫：
那麼所有到/, /api和 /api/action 的請求將全部被代理到 192.191.1.1 上面去。
原因是這裡的匹配實際上是一個正則匹配的過程，當我們請求 /api 時，首先讀取到了配置項中的第一個，拿配置中的 / 去匹配請求中的 /api ， 發現請求的/api 中包含配置項/, 匹配成功，直接將請求代理到了 192.191.1.1 上面去， 對/api/action的匹配也同理。
也就是說，它的匹配規則是： 拿配置項中的地址去匹配請求中的地址，如果請求中的地址中包含配置中的地址，則匹配成功，否則，拿下一個配置項繼續匹配。
所以，配置中的地址與請求地址中匹配的字元越少，匹配度越低。 上例中配置中的地址（/）與請求地址（/api）只有一個字元是匹配的，所以匹配度低。
所以我們正確的寫法應該是：
2. 環境配置
.env.production 線上環境打包 // vue-cli-service serve
.env.test 測試環境打包 // vue-cli-service test:unit
.env.development 開發環境打包 // vue-cli-service build 和 vue-cli-service test:e2eo
.emv.staging 使用mode 打包 -- vue-cli-service -- mode staging
.env.local. 本地環境變數，會被 git 忽略上傳