上一个新公司接手了一个vue-cli3+vue2+vue-router3.0+elementUI2.15+avue2.6的后台管理项目，因为vue2在2023年底已经不更新维护了，elementUI也只支持到vue2，然后总结了一下vue3的优势，最后批准升级成为了vite+vue3+vue-router4.5+elementPlus2.9+avue3.6，并向下兼容vu2。
那么现在开始升级：
第一步：
先搭建一个vite项目。
在这里说一下，前期调研的时候是有两种方案的，一种是先把vue-cli3升级到vue-cli4支持vue3，然后再把webpack换成vite。第二种是直接迁移到vite+vue3项目上，然后根据报错修改。最后决定用第二种，因为快！简单粗暴！
搭建vite+vue3项目就不多说了，官网都有介绍直接执行下面代码就行。
npm init vite@latest执行好以后安装路由vue-router
cnpm install vue-router --save第二步：
创建router文件夹，在下面建一个router.ts和index.ts
routes.ts
import { RouteRecordRaw } from 'vue-router';
//对外暴露配置路由
export const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: () => import('@/pages/home.vue'), // 注意这里要带上 文件后缀.vue
meta: {}
},
//要注意vue3 404页面写法，这是Path不能直接用*
{
path: '/:catchAll(.*)*', // 匹配所有路径 vue2使用* vue3使用/: pathMatch(.*)* 或 /: pathMatch(.*) 或 /: catchAll(.*)
redirect: '/404',
},
]index.ts:
//通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import { routes } from './routes'
//创建路由器
const router = createRouter({
//路由模式根据需求选择
history: createWebHashHistory(),
routes: routes,
})
export default router你如果是直接把vue2项目的路由文件直接复制过来的，需要注意2点：
1、每个文件后面之前省略的.vue必须要加上。
2、404页面的path不能是通配符*，要修改为/:pathMatch(.*)或是/:catchAll(.*)
第三步：
安装sass、axios、vuex（如果你之前是用的vuex就直接安装vuex，如果之前没有建议用pinia）、element-plus和@element-plus/icons-vue、avue（如果用到了avue就安装没有的话不用安）等你当前项目中依赖的一些包。
怎么安装就不多说了，不过element-plus @element-plus/icons-vue是必须要安装的因为之前的elementui不支持vue3。安装完以后介绍一个转换神器gogocode。
可以把你原来的vue2项目的代码转成兼容vue3的，把elementUI转成兼容elementPlus的。
直接上官方连接，根据官方介绍直接转换就行，先执行vue2转vue3，再执行elementUI转elementPlus。
Vue2 到 Vue3 升级插件
Element to Element Plus 升级插件
第四步：
设置兼容vue2。根据vue官网的介绍，下载@vue/compat包，如果存在 vue-template-compiler 的话，将其替换为 @vue/compiler-sfc。
npm i @vue/compat -S然后在vite.config.ts里面修改：
// vite.config.js
export default {
resolve: {
alias: {
vue: '@vue/compat'
}
},
plugins: [
vue({
template: {
compilerOptions: {
compatConfig: {
MODE: 2
}
}
}
})
]
}官网就介绍到上面，可我这配置好以后，就是不兼容vue2，最后发现在main.ts里面也要配置。
在main.ts里面添加以下代码：
// 启用 Vue 2 兼容模式
import { configureCompat } from '@vue/compat';
configureCompat({ MODE: 'Vue2'});这样再npm run dev试试，应该就可以启动起来了。
下面就是每个页面点一下看看报错了，根据报错修改了。
以下是可能存在的问题：
1、页面中引入的vue组件，后面没有加.vue的要加上.vue，要不报错。
2、elementUI升级elementPlus后样式可能会有出入，要统一在全局样式修改。
3、所有页面引入ICON图标的，因为@element-plub/icon图标名称有一些和elementUI的图标名称有出入，所以要根据官方提供的修改。icon名称参考：https://element-plus.org/zh-CN/component/icon.html
4、如果你用到了avue-crud里面的字典项，那么要确认一下dicUrl和dicHeaders是否还正确，我这里dicUrl不对，所以请求不到导致页面加载很慢，排查半天才发现。
5、全局搜索yyyy-MM-dd替换为YYYY-MM-DD
6、页面中所有require引入要改为import方式引入
7、页面中所有的::v-deep和/deep/要改为:deep()
8、vue-router升级到4.5以后name名称必须是唯一的，如果有重复的话页面是打不开的，因为路由加载就报错了。
9、时间选择器变成了英文，查看官方说明要在main.ts里面引入国际化，如下：
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
locale: zhCn,
})目前这是我发现的错误，升下的就一个页面一个页面点击查看报错修复就行。
