首页 > 其他分享 >vue2项目升级至vue3方案步骤踩坑

vue2项目升级至vue3方案步骤踩坑

时间:2024-11-22 10:44:02浏览次数:1  
标签:vue 转换 项目 步骤 报错 vue2 vue3

背景

这是一个金融类的项目:营销平台,项目是vuecli4搭建的vue2+elementUI+vant+antv PC端项目,需要内网开发
共有** 60万行代码 **,1720个vue文件,使用了一些只能适配vue2的依赖库和技术,需要找替代库和替代方案

一 把项目备份然后使用gogocode进行转换

先将源代码进行格式化转换,方便以后和转换出来的比对
1. 执行vue2转vue3的命令
2. 执行依赖库升级命令
3. 执行element升级命令
转换后肯定是起不来的,有很多很多报错,把转换后的代码备份,从main.js开始一点一点复制过来
4. 项目中使用了 vue-property-decorator gogocode无法转换,使用vue-class-migrator来转换

坑点:
1. ***window.$vueApp = Vue.createApp(App)要放到最上方 ***

2. Cannot read properties of undefined (reading 'type') 
TypeError: Cannot read properties of null (reading 'content')
编译阶段控制台报错
 暂时先把相关文件删除,后续再看错误原因。
 
3. at-rule or selector expectedscss(css-ruleorselectorexpected)
   1. 很多样式文件转换出现错误,先删掉
4. 现在,项目启动不报错了,样式还有一些问题,当下要解决的是,排查package.json中的不支持vue2的依赖

标签:vue,转换,项目,步骤,报错,vue2,vue3
From: https://www.cnblogs.com/dingtongya/p/18559822

相关文章

  • vue3+setup使用rtsp视频流实现实时监控,全屏,拍摄,自动拍摄等功能(纯前端)
    vue3+setup使用rtsp视频流实现实时监控,全屏,拍摄,自动拍摄等功能(纯前端)概要本文介绍了如何在Vue应用中通过WebRTC技术获取摄像头的rtsp视频流,同时展示了实时监控,全屏,拍摄,自动拍摄等功能。一、获取rtsp流并确保其可用1.因为是纯前端角度,所以从后端可以获取http开头的视频......
  • 构建客服知识库:企业效率提升的关键步骤
    客服知识库是企业提升客户服务效率和质量的重要工具。它不仅帮助客服团队快速准确地回答客户问题,还能通过数据分析来优化服务流程和提升客户满意度。1.明确知识库的目标和范围构建客服知识库的第一步是明确其目标和范围。这包括确定知识库的主要用户群体、需要包含的内容类......
  • 【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
    大家好,欢迎来到程序视点!我是小二哥!前言在VUE项目开发中,一些数据常常被多个组件频繁使用,为了管理和维护这些数据,就出现了状态管理模式。今天小二哥要给大家推荐的不是VueX,而是称为新一代的状态管理工具的Pinia.js。   关于Pinia.jsPinia.js由Vue......
  • 基于vue3的权限控制实现
    需求:不同角色的用户显示不同的菜单,且对页面的按钮也有是否对角色开发的权限服务端返回两个数据一个是菜单的权限列表,另外一个是拥有的按钮列表数据,如下: 动态加载菜单/**routerInfo:动态路由hasRoutePermission:用户拥有的路由权限*/constfilterDeepDynamic......
  • vue2-代理服务器&插槽
    解决跨域问题配置代理服务器代理服务器位于前端应用(客户端)和真实的后端服务器之间。当配置了代理服务器后,前端应用的请求不再直接发送到后端服务器,而是发送到代理服务器。代理服务器在接收到请求后,会根据预先配置的规则将请求转发到真正的后端服务器。例如,在Vue项目的开发服......
  • lombok使用二步骤
    1、添加依赖<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.34</version></dependency>2、在idea的插件中安装lombok3、注解@Data最常用的注解之一。注解在类上,提供该类所有属性的getter/setter方法,......
  • vue3版本实现h5自适应布局
    amfe-flexible和postcss-pxtorem可以一起使用来实现移动端的适配效果。参考的页面地址vite.config.js配置importpxtoremfrom'postcss-pxtorem';exportdefaultdefineConfig({plugins:[vue()],css:{postcss:{plugins:[pxtore......
  • 淘宝,天猫,京东,1688商品详情API测试步骤
    商品详情API测试步骤API接口测试是一种验证API接口功能的过程,它主要通过模拟客户端的操作,确保API接口的正确性、可靠性以及安全性。本文将介绍商品详情API接口测试的步骤。一、准备测试环境在开始商品详情API接口测试之前,首先需要准备测试环境,包括设备、软件以及被测试的......
  • 推荐 vue2、vue3 中功能最强大的表格组件,性能最强大的表格组件推荐、可编辑表格推荐
    vxe-table是一个vue的表格组件,支持可编辑和虚拟滚动高性能表格,公司使用了几年的表格,grid渲染器扩展功能非常强大。[email protected]@4.9.3//...importVxeUIfrom'vxe-pc-ui'import'vxe-pc-ui/lib/style.css'importVxeUITablefrom'vxe-table'......
  • 盘点Vue3 watch的一些关键时刻能够大显身手的功能
    前言watch这个API大家应该都不陌生,在Vue3版本中给watch增加不少有用的功能,比如deep选项支持传入数字、pause、resume、stop方法、once选项、onCleanup函数。这些功能大家平时都不怎么用得上,但是在一些特定的场景中,他们能够起大作用,这篇文章欧阳就来带你盘点一下这些功能。关注公......