vue-cli3+vue2+elementUI+avue升级到vite+vue3+elementPlus+avue总结

上一个新公司接手了一个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.tsimport { RouteRecordRaw } from 'vue-router';//对外暴露配置路由
export const routes: Array<RouteRecordRaw> = [{path: '/',name: 'home',component: () => import('@/pages/home.vue'), // 注意这里要带上 文件后缀.vuemeta: {}},//要注意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,
})

目前这是我发现的错误，升下的就一个页面一个页面点击查看报错修复就行。