「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」
前言
一直想把vue2老项目升级到vue3，好体验vue3的极速和vite的丝滑，正好借着掘金更文挑战的机会，说下我的心路历程，希望能对你有借鉴意义，帮助你少踩坑。
项目背景
老系统为公司内部受众主要系统，采用vue2+element-ui的技术栈开发实现。当前yun-design设计平台主要采用vue3+element-plus的实现方案提供的用户交互设计，为了将交互体验设计统一落地到多个老系统，和方便后续升级开发维护，需要对老系统项目进行升级。
这里顺带提一下我们内部自研的组件库平台，目前暂未开源，先贴图展示一下，
也许你当前维护的项目正是vue2版本的，也有了不得不升级的理由，下面跟着我一起来踩坑填坑吧
升级目标
俗话说，有了目标才有动力嘛，我把整个升级过程大致分为三个阶段
- 1.能够升级到vue3，界面看不了，但项目能编译通过，运行起来
- 2.运行后解决升级后页面中的报错和样式影响和相关组件问题
- 3.引入yundesign(可以看作是elemnet-plus二次封装版)
全量升级方案
刚开始还是想一把梭，来个全量升级，网上找到了大厂开源的升级方案和工具，使用阿里妈妈提供的升级工具GoGoCode进行尝试全量升级：根据官方提供的方案进行
项目用了基于 Vue2 的 ElementUI，它还没有支持 Vue3，要达成阶段目标一，就算把业务代码升级上去也没法跑起来
后面直接采用
Element UI 到 Element Plus 升级指南 里面包含了Vue2 转换成 Vue3的部分
升级方案跑完后遇到的问题
基于官方的升级流程过后，也许你已经成功了，说明你很幸运，项目没有那么复杂，但我遇到了以下问题：
卡在webpack编译环境，问题很奇怪 “Codegen node is missing for element/if/for node”，是v-slot的用法问题，但修复后仍在报错，不起作用，怀疑是webpack版本的影响，老项目本质是cli2创建出的项目，以前的研发对cli2中build文件下的webpack.config.base.js等配置做了组件集成封装名，对外不可见，也不易修改，直接升级成 vue3+element-plus的项目，步子确实有点大，在解决了一些奇奇怪怪的问题仍不起作用后，决定重新调整。
又调整升级思路：
先将老项目 cli2（webpack3+vue2+element-ui）
升级到cli4 （webpack4+vue2+element-ui）
再升级成 vue3 （vite2+vue3+element-plus）
新思路
新思路的流程我是这样的：用vue-cli4 脚手架新建一个空白项目，再把老项目按照vue-cli2的项目升级到vue-cli4做了哪些事情中提到注意点进行修改，项目基本就能编译通过运行起来了，接下来就是用升级工具GoGoCode，把element-ui升级成element-plus，vue2升级vue3，也许走完这一步，再做一些样式修改，你的项目就可以了，恭喜你。
但我的项目还不行，老项目系统页面有300多个，ui框架的升级改造会对系统页面有全面性的影响，为了对业务无损兼容，需要投入巨大的人力成本对页面逐个进行交互改造和测试，全部改完预计要半年时间，新升级的项目要上线感觉遥遥无期，当然领导也不会同意这么长的时间。
有没有更好的办法呢，答案是有的，后续更新中
