Vue2升级Vue3指南

1. 查看自己项目的Vue cli版本号

对应的应该是@vue/cli 5.x 版本

vue -V

2. 升级Vue cli 版本

npm i -g @vue/cli

3. 删除项目中的node_modules文件夹

4. 升级脚手架的依赖

4.1 升级vue-cli

vue upgrade

安装之后，vue-cli已经升级成功，且在package.json文件中已经更新

4.2 升级eslint、babel

因为@vue-cli与eslint babel插件等不匹配，需要下载对应版本的插件:

安装命令：

npm i @vue/cli-plugin-eslint@^5.0.8 -S
npm i @vue/cli-plugin-cli-plugin-babel@^5.0.8 -S

如果安装失败，可增加--legacy-peer-deps参数

npm i @vue/cli-plugin-eslint@^5.0.8 -S --legacy-peer-deps
npm i @vue/cli-plugin-cli-plugin-babel@^5.0.8 -S --legacy-peer-deps

5. 更改package.json文件中的vue版本

在 package.json 里，将 vue 更新到 3.1.0

6. 为了确保项目的依赖为最新的，需要删除项目中的node_modules文件夹

7. 安装相同版本的 @vue/compat

7.1 安装

npm install @vue/compat@^3.1.0

安装时如果发现vue版本有冲突，可以npm命令后添加--legacy-peer-deps参数来安装。

npm install @vue/compat@^3.1.0 --legacy-peer-deps

安装成功后 vue-template-compiler 会替换成@vue/compiler-sfc：

7.2 设置别名

在vue.config.js中为vue设置别名@vue/compat

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set('vue', '@vue/compat')
  },
};

8. 再次安装项目的依赖

可以将node_modules文件夹删除后再次执行npm install命令

9. 根据报错去解决问题

执行npm run serve运行项目后，会有很多报错，可以根据不同的报错完成项目迁移。

9.1 TypeError: transpileDependencies.map is not a function

原因：旧版本的npm中，transpileDependencies是一个字符串数组，新版本的npm中，transpileDependencies被改成了一个对象，并且需求mpa()方法来处理。因此，在较新版本的npm中使用旧版本的配置方式，会导致transpileDependencies.map不是一个函数的错误，

解决：在vue.config.js中，添加配置transpileDependencies: []即可。

module.exports = {
  transpileDependencies: [],
};

9.2 css深度选择器写法更改

将::v-deep、>>>、/deep/都改成:deep()

9.3 @vue/cli从4.0升级到5.0后缺失polyfills

9.3.1 执行安装命令

npm install node-polyfill-webpack-plugin

若安装失败，可以npm命令后添加--legacy-peer-deps参数来安装

• @vue/cli4升级@vue/cli5 node.js polyfills错误的解决方式
• node-polyfill-webpack-plugin

9.3.2 进行vue.config.js配置

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()]
  },
};

默认情况下，@vue/cli从4.0升级到5.0后，process不会默认填充，需要使用的话，需要增加additionalAliases属性：

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
  configureWebpack: {
    plugins: [
        new NodePolyfillPlugin({
            additionalAliases: ['process'],
        })
    ]
  },
};

9.4 ERROR ESlint is not a constructor

module.exports = {
  lintOnSave: false,// 关闭语法检查
};

9.5 eslint与@vue/cli-plugin-eslint不匹配

直接通过下载包的方式解决eslint 、 babel-eslint 、@vue/cli-plugin-eslint不匹配问题

npm install eslint babel-eslint @vue/cli-plugin-eslint --save-dev legacy-peer-deps

如果安装失败，可以先删掉node_modules目录和package-lock.json文件

或者卸载对应插件

npm uninstall eslint eslint-plugin-vue @vue/cli-plugin-eslint

删除对应配置：

9.5 crpto.js升级

卸载crypto包，安装crypto-es包：

10. 将vue-router、vuex升级为v4

10.1 下载

npm install vue-router@4 vuex@4 --save

10.2 修改mains.js注册方式

vue2

import Vue from "vue";
import router from "./router";
import store from './store';

 new Vue({
   render: (h) => h(App),
   router,
   store
}).$mount("#app");

import Vue, { createApp } from "vue";
import router from './router';
import store from './store';

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

10.3 router.js修改

vue2

 import Vue from "vue";
 import Router from "vue-router";

 Vue.use(Router);
 export default new Router({
   mode: "hash",
   scrollBehavior: () => ({
     y: 0
   }),
   routes: constantRouterMap
});

vue3

import { createRouter, createWebHashHistory } from 'vue-router';

export default createRouter({
  history: createWebHashHistory(),
  routes: constantRouterMap
});

10.4 vuex修改

vue2

const store = new Vuex.Store({
   modules: {
     user,
     baseInfo,
   },
 })

vue3

import { createStore } from 'vuex'
const store = createStore({
  modules: {
      user,
      baseInfo
  }
})

10.5 测试router升级为v4是否生效

新建demo.vue文件，并使用vue3的compisitionApi完成页面编写：

<template>
  <div class="demo">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <button @click="add">数字增加</button>
    <p>{{ count }}</p>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const title = ref('Welcome to Vue 3')
const description = ref('This is a simple page example.')
const count = ref(0)
 
function add() {
  count.value++
}
</script>
 
<style scoped>
.demo {
  margin: 100px;
}
h1 {
  color: #3eaf7c;
}
p {
  margin: 20px 0;
}
</style>

11. 将elementUI升级为elementPlusUI

11.1 下载

卸载elementUI包

npm install element

下载elementPlusUI

npm install element-plus --save

11.2 引入方式

vue2

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

vue3

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 样式路径变化
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)

11.3 Message改为ElMessage

// vue2
// import { Message } from "element-ui";

// vue3
import { ElMessage as Message } from 'element-plus'