项目vue2升级vue3

发布时间 2023-08-10 17:19:20作者: 泠风lj

Vue2迁移vue3操作指南

一、前言

有个自动化迁移工具gogocode-cli,尝试后发现不好用且得不偿失,就放弃了,感兴趣的可以去了解一下,本指南选择手动迁移

迁移开始之前,我们先来梳理下思路:

现在有一个vue2的项目,
首先我们升级框架,
得到了一个vue3的框架,但是上面放着vue2的代码,跑不起来,
然后我们安装并配置迁移构建版本(@vue/compat),
通过它能够在vue3的框架上跑绝大多数vue2的代码(兼容与否可自行配置)
接下来我们逐个迁移,将vue2的代码替换成vue3的写法,
如果项目中有必须依赖vue2的东西,就只能通过迁移构建版本兼容,
如果能完全vue3化,则迁移完毕后,删除迁移构建版本

注意,如果跟着本文档一步步迁移,则中途可以先不运行项目,将已知的迁移步骤完成后,再运行项目,解决剩余没有提及到的可能存在的问题

 

二、迁移过程

1.升级依赖

修改package.json文件(仅供参考,如果你项目用了不同的依赖配置,升级成适配vue3的就行了)

  • 升级vue、vuex、vue-router、@vue/cli-service
  • 新增@vue/compat
  • 替换element-ui 为 element-plus
  • 替换vue-template-compiler 为 @vue/compiler-sfc
  • 删除@babel/plugin-transform-runtime (因为@vue/cli-plugin-babel里本就包含了它)

然后删除node_modules,删除lock文件,重新执行npm install

这里可以先暂时不考虑其他依赖的升级适配,放到后面进行

参考代码: