注意二者的版本，版本過低需要升級，本人升級後的版本如下：
$ node -v
v16.15.1
$ npm -v
8.11.0
由於我的專案採用的原架構是vue2+vant2+sass+axios+webpack，由於專案是通過vue-cli搭建的，因此升級完nodejs和npm後，便要對vue-cli進行升級。而後除了vue和webpack需要按照官方遷移構建檔案進行升級處理，sass和vant也需要進行升級，vant由v2升級至v3，本著反正要升級的原則，axios也順便做了升級處理（axios升級不是必須的，不想升級也無所謂）。
以下是我升級前後相關依賴的版本號對比：
升級前：
"dependencies": {
...
"axios": "^0.21.1",
"vant": "^2.12.40",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
...
},
"devDependencies": {
...
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11",
...
}
升級後：
"dependencies": {
...
"axios": "^0.27.2",
"vant": "^3.5.2",
"vue": "^3.1.0",
"vue-router": "^4.1.1",
"vuex": "^4.0.2"
...
},
"devDependencies": {
...
"@vue/babel-plugin-jsx": "^1.1.1",
"@vue/cli-plugin-babel": "^5.0.7",
"@vue/cli-plugin-eslint": "^5.0.7",
"@vue/cli-plugin-router": "^5.0.7",
"@vue/cli-plugin-vuex": "^5.0.7",
"@vue/cli-service": "^5.0.7",
"@vue/compiler-sfc": "^3.1.0",
"node-sass": "^7.0.1",
"sass-loader": "^13.0.2",
// "vue-template-compiler": "^2.6.11", // 刪除
...
}
module.exports = {
...
devServer: {
...
// 可以將這部分功能關閉，因為專案雖然可以執行構建，但是檔案中還有很多程式碼警告
overlay: {
// 當出現編譯器錯誤或警告時，在瀏覽器中顯示全螢幕覆蓋層
warnings: false,
errors: true
},
...
},
css: {
...
loaderOptions: {
scss: {
// 升級後，屬性名需要由 prependData 改為 additionalData
additionalData:`
@import "assets/css/mixin.scss";
@import "assets/css/variables.scss";
$cdn: "${defaultSettings.$cdn}";
`
}
},
...
},
chainWebpack: config => {
...
// 新增 vue 別名
config.resolve.alias
.set('vue', '@vue/compat')
...
// vue-loader的相關部分也需要進行處理
// 以下注釋部分為原始碼
// config.module
// .rule('vue')
// .use('vue-loader')
// .loader('vue-loader')
// .tap(options => {
// options.compilerOptions.preserveWhitespace = true
// return options
// })
// .end()
// 以下為新程式碼
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2 // 設定為2，表示開啟相容 VUe2 模式
}
}
}
})
...
},
...
}
升級前，我們使用時寫法一般如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
...
},
...
})
升級後，修改為如下寫法：
import { createStore } from 'vuex'
const store = createStore({
modules: {
...
},
...
})
升級前，我們使用時寫法一般如下：
import Vue from 'vue'
import Router from 'vue-router'
const constantRouterMap = {
// 路由設定
...
}
Vue.use(Router)
const createRouter = () =>
new Router({
...
routes: constantRouterMap
})
const router = createRouter()
export default router
升級後，修改為如下寫法：
import { createRouter, createWebHashHistory } from 'vue-router'
const constantRouterMap = {
// 路由設定
...
}
/*
官方檔案說明：
新的 history 設定取代 mode#
mode: 'history' 設定已經被一個更靈活的 history 設定所取代。根據你使用的模式，你必須用適當的函數替換它：
"history": createWebHistory()
"hash": createWebHashHistory()
"abstract": createMemoryHistory()
更多內容可以參見官方檔案：https://router.vuejs.org/zh/guide/migration/index.html#%E6%96%B0%E7%9A%84-history-%E9%85%8D%E7%BD%AE%E5%8F%96%E4%BB%A3-mode
*/
const router = createRouter({
history: createWebHashHistory(), // hash模式
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap,
})
export default router
升級前，我們使用時寫法一般如下：
import Vue from 'vue'
import router from './router'
import store from './store'
...
import util from './utils/export' // 自己封裝的全域性通用方法庫
// 可以直接這樣繫結到VUe的原型鏈上
Vue.prototype.$util = util
...
new Vue({
el: '#app',
router,
store,
render: h => h(App)
}).$mount('#app')
升級後，修改為如下寫法：
import { createApp } from 'vue'
import router from './router'
import store from './store'
...
import util from './utils/export'
...
const app = createApp(App)
app.use(router)
app.use(store)
app.prototype.$util = util
...
app.mount('#app')
至此，可以執行 npm run serve、npm run build 了。不過，升級並沒有就此結束，相反，這只是一個開始，我們現在執行的程式碼還是相容vue2模式，此外，在執行構建過程中，你會發現，儘管現在是相容vue2模式，但是你的專案檔案中還會有很多語法warning，這需要我們後續排查修改，直到真正完成Vue3的升級。
參考文獻
用於遷移的構建版本
VUe-router 從 Vue2 遷移
vuex 從 3.x 遷移到 4.0
Vue CLI 檔案