vue2项目迁移vue3与gogocode的使用

进击的阿三姐2024-07-04 12:58

#背景

公司有个项目使用vue2+js+webpack框架开发的，由于该项目内部需要安扫，导致很多框架出现了漏洞需要升级，其中主要需要从vue2升vue3,但是重新搭框架推翻重做成本太高，于是找到了gogocode。

#升级步骤踩坑

安装 gogocode插件

bash 复制代码

pnpm install gogocode-cli -g

使用迁移工具将代码从vue2转换到vue3

gogocode/packages/gogocode-plugin-vue at main · thx/gogocode · GitHub

bash 复制代码

gogocode -s ./src -t gogocode-plugin-vue -o ./src

./src为代码所在文件夹

升级 Element 的引用代码

bash 复制代码

gogocode -s ./src -t gogocode-plugin-element -o ./src

安装element-plus

bash 复制代码

pnpm install element-plus

手动修改main.js 里引用

javascript 复制代码

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

window.$vueApp = Vue.createApp(App) // 放在 import下第一行

```
其他文件注册引用
...

```

window.$vueApp.mount("#app"); //放在最后一行

依赖升级

bash 复制代码

gogocode -s package.json -t gogocode-plugin-vue -o package.json

参照v-cli文档迁移webpack相关配置

Migrate from v4 | Vue CLI

升级eslint相关依赖版本及配置至支持vue3

https://eslint.vuejs.org/user-guide/

https://eslint.nodejs.cn/docs/latest/

修复代码里的其他报错

a. 如在项目中引入了echarts依赖，在初始化时应使用markRaw

javascript 复制代码

import { markRaw } from "vue";
var myChart = markRaw(echarts.init(DOM));

b. Util中的公用方法用export导出在main中引用

javascript 复制代码

import { functionA } from '@/utils'
window.$vueApp.config.globalProperties.functionA = functionA

c. 替换不兼容组件

d. 根据报错提示修复代码