vue cli 3 升級到 vue cli 4 方法步驟及升級點總結
簡介:vue cli 4 官方已經更新有一段時間了,現在是4.0.5
版本,看了官方文檔大概有二十幾點的更新,還是乾貨滿滿呀,值得升級一下,下面是升級步驟。
一.首先,在全局安裝最新的 Vue CLI:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
檢查安裝的版本
vue -V # 輸出:@vue/cli 4.x.x 說明@vue/cli 4安裝成功( vue cli 3的版本會輸出 3.x.x )
踩坑記錄
npm install -g @vue/cli
執行成功,但是執行 vue -V
輸出的還是3.5.6
(我以前安裝的版本),
於是又重新執行 npm install -g @vue/cli
,顯示成功,執行 vue -V
輸出的還是3.5.6
,
一臉懵逼 ,然後重啓電腦,再執行vue -V
輸出 @vue/cli 4.0.5
,解決 。
二.在項目根目錄下執行
vue upgrade
然後出現
提示 繼續升級這些插件嗎?
輸入 Y
即可.
三.等步驟二 執行完會發現主要有 2 個文件被修改
1.文件 babel.config.js
主要是 babel 的預設由@vue/app
改成了@vue/cli-plugin-babel/preset
原來的
module.exports = {
presets: [
'@vue/app', // 這行
[
'@babel/preset-env',
{
useBuiltIns: 'entry'
}
]
]
}
升級後的
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset', // 這行
[
'@babel/preset-env',
{
useBuiltIns: 'entry'
}
]
]
}
2.文件 package.json (package-lock.json 也會更改)
主要是依賴升級
原來的
{
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-service": "^3.11.0"
}
升級後的
{
"@vue/cli-plugin-babel": "^4.0.5",
"@vue/cli-plugin-eslint": "^4.0.5",
"@vue/cli-service": "^4.0.5"
}
四.然後啓動項目
npm run serve
然後報下面的錯
1.第一個錯(警告)
WARN A new version of sass-loader is available. Please upgrade for best experience.
這行是 vue cli 4
升級了自己的依賴 sass-loader
導致的
它把 sass-loader
由 ^7.x.x
的版本升級到了 ^8.0.0
,而我項目中使用的是^7.1.0
所以升級一下自己項目的 sass-loader
就好了
執行下面命令即可
npm i [email protected] -D
2.然後第二個錯說沒有安裝core-js
vue cli 4
把 core-js
由 ^2.x.x
的版本升級到了 ^3.x.x
於是安裝一下
npm i core-js
然後重啓項目還是不行,看了下官方文檔和 babel 有關
main.js 代碼中
import '@babel/polyfill'
隱藏這個代碼
重啓好了
然後把 @babel/polyfill
換成成 babel-polyfill
即可
npm i babel-polyfill
main.js 代碼中 改爲
import 'babel-polyfill'
五.vue cli 4 主要升級點總結
1."@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"
由 v3
的版本升級到了 v4
2.sass-loader
由 v7
的版本升級到了 v8
3.core-js
由 v2
的版本升級到了 v3
4.webpack-chain
由 v4
的版本升級到了 v6
5.css-loader
由 v1
的版本升級到了 v3
6.url-loader
由 v1
的版本升級到了 v2
7.file-loader
由 v3
的版本升級到了 v4
8.copy-webpack-plugin
由 v4
的版本升級到了 v5
9.terser-webpack-plugin
由 v1
的版本升級到了 v2
10.@vue/cli-plugin-pwa
由 v3
的版本升級到了 v4
11.新增插件 vue add vuex
vue add router
12.pug-plain
已重命名爲pug-plain-loader
13.默認目錄結構已更改
src/store.js
改爲 src/store/index.js
src/router.js
改爲 src/router/index.js
14.由於兼容性原因,仍支持 router&routerHistoryMode
選項 preset.json
但是現在建議使用它來 plugins: { '@vue/cli-plugin-router': { historyMode: true } }
獲得更好的一致性
15.api.hasPlugin('vue-router')
不再受支持,現在 api.hasPlugin('router')
16.lintOnSave
選項的默認值(未指定時)從 true
更改爲 default
17.廢棄vue-cli-service test:e2e
18.@vue/cli-plugin-e2e-nightwatch
Nightwatch.js
已從0.9
升級到1.x
19.@vue/cli-plugin-unit-mocha
升級到Mocha 6
20.@vue/cli-plugin-unit-jest
jest
由 v23
升級到v24
21.@vue/cli-plugin-typescript
更好的ts(x)
支持 ,勝過js(x)
參考鏈接