「Vue實踐」專案升級vue-cli3的正確姿勢
摘要：
建立vue-cli3專案，按原有專案的配置選好各項配置
遷移目錄
src->src
static->public
複製程式碼
對比新舊 package.json ，然後 yarn install ，完畢。
...
- 建立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
