一. 原以為升級vue-cli3的路線是這樣的：
- 建立vue-cli3專案，按原有專案的配置選好各項配置
- 遷移目錄
src->src
static->public
複製程式碼- 對比新舊
package.json，然後yarn install，完畢。
然鵝... 執行專案，報錯You are using the runtime-only build of Vue......：
然後去查了下舊專案的相關字眼檔案：
噢，原來是vue-cli3的webpack相關檔案都得自己寫。於是乎根據官網的指引，在根目錄建立了vue.config.js
此時粗略配置：
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = false
return options
})
config.resolve.alias
.set('vue$', 'vue/dist/vue.esm.js')
.set('@', resolve('src'))
}
複製程式碼二. 此時勉強能跑起來，但後續遇到了這些坑：
#1 public 靜態資源不載入
```
const CopyWebpackPlugin = require('copy-webpack-plugin')
// ....
// 確保靜態資源
config.resolve.extensions = ['.js', '.vue', '.json', '.css']
config.plugins.push(
new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
)
```
複製程式碼#2 Chrome 檢視樣式時無法找到原始檔
vue-cli3 裡預設關閉 sourceMap，樣式都會被打包到首頁。
解決: 需要自己配置開啟
// 讓樣式找到源
css: {
sourceMap: true
},
複製程式碼#3 生產環境的debuger和console無法通過 uglifyjs-webpack-plugin 和 uglify-es 剔除
原因：不支援es6, 需要配置babel(uglify-es按配置填會顯示不存在選項)
解決：外掛terser
```
const TerserPlugin = require('terser-webpack-plugin')
if (process.env.NODE_ENV === 'production') {
// 為生產環境修改配置...
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
})
} else {
// 為開發環境修改配置...
}
```
複製程式碼#4 無法在config目錄下配置不同環境的API_URL，用於跨域請求
原因：vue-cli3 中需要遵循變數規則，使用VUE_APP字首
官方規則：在客戶端側程式碼中使用環境變數
解決：於是你需要建立如下幾個檔案：
.local也可以加在指定模式的環境檔案上，比如.env.development.local將會在development模式下被載入，且被 git 忽略。
檔案內容：
// env.development.local
NODE_ENV = development
VUE_APP_URL = http://xxx.x.xxx/
複製程式碼#5 vue-cli代理轉發控制檯反覆列印"WebSocket connection to'ws://localhost..."
解決方法：
vue.config.js中配置devServer.proxy的ws為false
結合上述兩步，相對應的vue.config.js，需要這麼寫：
const env = process.env.NODE_ENV
let target = process.env.VUE_APP_URL
const devProxy = ['/api', '/'] // 代理
// 生成代理配置物件
let proxyObj = {};
devProxy.forEach((value, index) => {
proxyObj[value] = {
ws: false,
target: target,
// 開啟代理：在本地會建立一個虛擬服務端，然後傳送請求的資料，並同時接收請求的資料，這樣服務端和服務端進行資料的互動就不會有跨域問題
changeOrigin: true,
pathRewrite: {
[`^${value}`]: value
}
};
})
// ....
devServer: {
open: true,
host: 'localhost',
port: 8080,
proxy: proxyObj
}
複製程式碼最後貼上我的vue.config.js：
const CopyWebpackPlugin = require('copy-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const path = require('path')
const env = process.env.NODE_ENV
let target = process.env.VUE_APP_URL
const devProxy = ['/api', '/'] // 代理
// 生成代理配置物件
let proxyObj = {};
devProxy.forEach((value, index) => {
proxyObj[value] = {
ws: false,
target: target,
// 開啟代理：在本地會建立一個虛擬服務端，然後傳送請求的資料，並同時接收請求的資料，這樣服務端和服務端進行資料的互動就不會有跨域問題
changeOrigin: true,
pathRewrite: {
[`^${value}`]: value
}
};
})
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: '/',
// 讓樣式找到源
css: {
sourceMap: true
},
configureWebpack: config => {
// 確保靜態資源
config.resolve.extensions = ['.js', '.vue', '.json', '.css']
config.plugins.push(
new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
)
if (process.env.NODE_ENV === 'production') {
// 為生產環境修改配置...
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
})
} else {
// 為開發環境修改配置...
}
},
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = false
return options
})
config.resolve.alias
.set('vue$', 'vue/dist/vue.esm.js')
.set('@', resolve('src'))
},
devServer: {
open: true,
host: 'localhost',
port: 8080,
proxy: proxyObj
}
}
複製程式碼三. Eslint相關報錯及配置
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
'generator-star-spacing': 'off',
'object-curly-spacing': 'off',
// 最常出現的錯誤
'no-unused-vars': 'off',
// 最常出現的錯誤
"vue/no-use-v-if-with-v-for": ["error", {
"allowUsingIterationVar": true
}],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
複製程式碼最後的最後，跑個專案
yarn serve
yarn build
