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

devtools/2025/3/10 11:56:15/

上一个新公司接手了一个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,
})

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


http://www.ppmy.cn/devtools/165995.html

相关文章

《OpenCV》—— dlib(换脸操作)

文章目录 dlib换脸介绍仿射变换在 dlib 换脸中的应用 换脸操作 dlib换脸介绍 dlib 换脸是基于 dlib 库实现的一种人脸替换技术&#xff0c;以下是关于它的详细介绍&#xff1a; 原理 人脸检测&#xff1a;dlib 库中包含先进的人脸检测器&#xff0c;如基于 HOG&#xff08;方向…

传输层协议

目录 一、深刻理解read和write &#xff08;1&#xff09;发送/接受缓冲区的存在 &#xff08;2&#xff09;缓冲区是什么样子的 二、UDP协议 &#xff08;1&#xff09;UDP协议报头格式&#xff1a; &#xff08;2&#xff09;UDP的缓冲区 三、TCP协议 &#…

【探商宝】大数据企业销售线索平台:销售型公司的战略转型引擎

一、市场现状与销售型公司的核心痛点 在数字经济高速发展的2025年&#xff0c;全球企业获客成本较五年前增长超过300%&#xff0c;而B2B销售线索的平均转化率仍徘徊在15%-20%之间。这一矛盾背后&#xff0c;折射出传统销售模式的三重困境&#xff1a; ​数据孤岛导致决策滞后…

大模型学习笔记------Llama 3模型架构之RMS Norm与激活函数SwiGLU

大模型学习笔记------Llama 3模型架构之RMS Norm与激活函数SwiGLU 1、归一化模块RMS Norm2、激活函数SwiGLU3、一些思考 上文简单介绍了 Llama 3模型架构。在以后的文章中将逐步学习并记录Llama 3模型中的各个部分。本文将首先介绍归一化模块RMS Norm与激活函数SwiGLU。 1、归…

揭开AI-OPS 的神秘面纱 第三讲(上)数据平台层技术架构与组件选型分析

今天我们延续继续进行第三讲分析 数据平台层技术架构与组件选型分析 (通用性视角) 数据平台层作为 AI-Ops 架构的核心支撑层&#xff0c;负责接收、存储、处理和管理来自数据采集层的海量运维数据。 数据平台层的通用性至关重要&#xff0c;它需要能够高效、可靠地处理 Metr…

08react基础-react原理

setState()更新数据 setState()更新数据是异步的注意&#xff1a;使用该语法&#xff0c;后面的setState不要依赖前面setState的值多次调用setState&#xff0c;只会触发一次render import React from react import ReactDOM from react-dom class App extends React.Component…

交大智邦后端Java笔试题

交大智邦后端Java笔试题 简答题 只要一个类加上了Component注解&#xff0c;就一定能成为一个Spring Bean吗&#xff1f;如果不是&#xff0c;请举出反例。 不一定 扫描范围不包括 com.code.lab.web.component 或者被 ComponentScan 显式排除 通过 excludeFilters 手动排除特定…

Android Glide 配置与初始化模块源码深度剖析

一、引言 在 Android 开发中&#xff0c;图片加载是一个常见且重要的功能。Glide 作为一款强大的图片加载库&#xff0c;因其高效、灵活和易于使用的特点&#xff0c;被广泛应用于各种 Android 应用中。Glide 的配置与初始化模块是整个库的基础&#xff0c;它允许开发者根据不…