1、nodejs和npm
注意二者的版本，版本过低需要升级，本人升级后的版本如下：
$ node -v v16.15.1 $ npm -v 8.11.0 2、package.json 和依赖升级
由于我的项目采用的原架构是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", // 删除 ... } 3、修改 vue.config.js
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 模式 } } } }) ... }, ... } 4、vuex 调整
升级前，我们使用时写法一般如下：
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: { ... }, ... }) 5、vue-router 调整
升级前，我们使用时写法一般如下：
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 6、main.js 调整
升级前，我们使用时写法一般如下：
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') 7、npm run
至此，可以执行 npm run serve、npm run build 了。不过，升级并没有就此结束，相反，这只是一个开始，我们现在运行的代码还是兼容vue2模式，此外，在运行构建过程中，你会发现，尽管现在是兼容vue2模式，但是你的项目文件中还会有很多语法warning，这需要我们后续排查修改，直到真正完成Vue3的升级。
参考文献
用于迁移的构建版本
VUe-router 从 Vue2 迁移
vuex 从 3.x 迁移到 4.0
Vue CLI 文档
