公司前端项目使用的是人人开源的renren-fast-vue，此项目使用的是vue2+element-ui，但element-ui的组件比较少，element-plus又只支持vue3，本次将进行一次全面升级。

vue2升级vue3

使用的升级工具是GoGoCode，官方文档。

第一步，首先将项目复制一份，使用新复制出来的项目进行升级（.git,.idea,node_modules这些文件夹就不要复制了），项目初始状态是这样的，目前还是vue2

第二步，根据GoGoCode文档的说明操作，执行命令npm install gogocode-cli -g安装最新的 gogocode-cli

第三步，在项目根目录执行gogocode -s ./src -t gogocode-plugin-vue -o ./src，进行目前已存在代码的转换，由于我是复制的项目，所以输出目录和源目录是同一个都是./src，然后会询问是否覆盖掉原代码，输入y按回车继续，等待一会儿执行完毕，能看到我目前的项目有55个文件。（自动修改的代码并不一定是可用的，后面会有很多bug需要手动修改）

第三步，在项目根目录执行gogocode -s package.json -t gogocode-plugin-vue -o package.json，此步骤是自动帮你修改package.json里的依赖版本，比如vue版本就会修改成3.0以上的。一样会询问是否覆盖原文件，输入y回车继续。完成后查看package.json里vue版本已经是3.0.0的了

第四步，执行npm install安装依赖

报错了....先把package.json里原来的element-ui删掉，反正后面是要换element-plus的，再试一次

又有错误，好像是版本的问题，根据错误提示执行npm install --legacy-peer-deps再试一次

这次成功了，立马执行npm run dev启动项目看看

提示模块找不到，原来是之前我把element-ui删掉了，那这个先跳过，直接开始升element-plus

element-ui升级element-plus

还是使用GoGoCode工具，官方文档， 执行命令gogocode -s ./src -t gogocode-plugin-element -o ./src然后输入y按回车继续

这个命令只是把原来src目录里的代码转换成element-plus的语法，所以package.json里还需要自己手动加上element-plus.

执行命令npm install element-plus --save --legacy-peer-deps安装element-plus

另外element-plus的图标需要另外安装导入，我觉得这样有点麻烦了，而且饿了么的图标库也不多，所以我干脆不用饿了么的图表了，改用Font-Awesome6，图标这个后面在写。而且当前项目里存在有使用EL的图标语法，所以后面也要手动一个一个换掉。

OK，现在安装好element-plus后还需要改main.js，把原来element-ui的东西删掉，添加element-plus。

启动试试，执行npm run dev，结果启动后报错，提示说找不到vue，这个问题搜遍全网也找不到解决方法，所以干脆转战vite。

cli项目转vite项目

使用vite创建一个空项目，官方文档。

执行命令npm create vite@latest 注意执行命令时的所在目录，我下面的执行目录就不合适了，不过影响不大，再移出来就好了 这个操作有分几步 第一步输入新项目的名称 第二步使用键盘上下键选择框架类型，我选择第二个vue 第三步选择脚本语言，我选择第二个JavaScript 按回车就创建好了一个新vite项目 新项目里面有一个.vscode文件夹，我用的idea，所以这个文件夹可以直接删掉了

然后就是把原来cli的项目代码转到新的vite项目中去： 第一步，把vite项目中的src目录删除，然后将cli项目的src目录整个复制进vite项目中。（也就是文件夹替换） 第二步，将package.json中的dependencies和devDependencies移过去 注意，vite项目原来的devDependencies里有两个配置要保留，不要覆盖掉 第三步，执行npm install --legacy-peer-deps安装依赖 执行npm run dev启动试试

手动修改各种错误

不认识"@"符号

vite不认识“@”符号，需要改成相对路径，我把main.js中的【@/App】修改成【./App】后就可以了，不过经过查阅网路后发现，在vite.config.js中加一句配置即可。

导入的文件必须有.vue后缀

还有错，最终得知vite项目导入文件是必须加上.vue后缀名的，不能简写了，把main.js中原来的【./App】改成【./App.vue】就可以了，当然这个问题整个vue项目只要涉及到的都要改。

缺少sass依赖

接着又提示缺少sass，检查了package.json发现确实没装，那就装一个，执行命令npm install sass --save-dev --legacy-peer-deps

require is not defined

安装完sass后重启项目发现不报错了，但是页面空白，打开控制台看一下结果有报错。结果是vite不识别require，所以这里改为直接import。 把require这行删掉，下面所有的路由组件改为import

Cannot set properties of undefined (setting '$cookie')

这个把main.js中原来的window.$vueApp.use(VueCookie) 修改为window.$vueApp.config.globalProperties.$cookies = VueCookies;可解决

Cannot set properties of undefined (setting 'storeState')

提示window.SITE_CONFIG是空的，那就在这句之前赋值个空对象

ReferenceError: process is not defined

改完上一个错，接着下一个错，在vite.config.js添加这段就好了

各种代码bug

页面终于出来了，但还是有问题，控制台的蓝字应该是异常捕获输出的内容，可是不知道是什么异常，那就直接全局搜索找到对应的代码文件，将异常捕获这段先注释掉 刷新页面后，哦原来是我的后台项目没启动...，并且前端项目还需要修改网络请求路径。

经查看请求拦截器发现，请求路径是从window.SITE_CONFIG.baseUrl取的 所以干脆直接在main.js中指定： 然后把后台项目启动 OK，验证码图片请求到了，不过登录页的背景图找不到，检查登录页的css样式，改成相对路径吧 刷新页面再看看 这下背景图也有了，也没有报错了，登录一下 点击登录，结果： 是Vue.cookie的语法不对了，之前在main.js中有指定过的，那就改成： 再点登录试一次： 好吧，this.$cookie也不对，改成通过导入组件的方式：

import $cookie from "vue-cookie";

$cookie.set('token', data.token) 改完后再试：

Uncaught (in promise) TypeError: router.addRoutes is not a function

vite中的路由又不支持addRoutes语法...，那就改成一个一个add

这次修改过后再点击登录尝试，后面发现了一系列之前发生过的问题，都是Vue.cookie的问题、导入文件后缀名.vue的问题，以及存在有导入ElIcon提示不存在的问题，ElIcon的代码统统删掉，其他问题的解决和之前的处理方式一样

ReferenceError: Cannot access 'SubMenu' before initialization

各个地方都改好后又出现了一个新问题，这是由于这个组件循环导入自己造成的 这样修改：

修改样式

再试亿次：..........终于成功登录到首页了 但是样式有问题，首先左侧没有菜单栏，但其实是有的只不过文字颜色是黑色和背景颜色一样。 后来查看元素发现，element-ui的菜单栏class改了，由原来的el-submenu__title改成了el-sub-menu__title，多了个横杠，那么OK，我也改成带横杠的: 左侧菜单栏正常了，还有上方的导航栏样式也有问题，这里就不详细写了，照着element-plus的文档自己调一调吧。

动态路由的修改

点击一个菜单： 果然还是有错误...menuList[i]怎么会是空的呢。。。 同时这里意识到，vite导入组件是必须加.vue后缀名的，所以这里动态获取的菜单栏地址，应该也要加上.vue后缀名 这样改：（/* @vite-ignore */是为了去掉idea控制台里的警告） 改完后再试一次： 还是.vue后缀名的问题，老问题了，去添加上就行了，然后再试 成功了！（期间还有好多ElIcon的问题这里就省略不写了，前面都有处理过）

然后每个菜单、每个页面、每个按钮都点一遍，几乎每个页面都会有错误，都是缺少.vue后缀名或者找不到elementplusicon组件的问题，一个一个改，至此项目升级基本完成了

处理浏览器控制台的一些警告

这好像是说router-view这种写法过时了，根据警告的提示就这样改：

还有个警告： 这个是element-plus的按钮有了新写法，把原来按钮的<el-button type="text">按钮</el-button>改为：<el-button link">按钮</el-button>

element-plus icon替换为Font Awesoe

找到index.html直接添加： ， 在需要有icon的地方替换为fa的写法：