vue2升级vue3

1. 背景

最近在写一个项目，整个技术框架是vue2+ts， 当时为了支持ts，做了相应的配置和插件，等开始写的时候，又发现有一堆的修饰器，真心累了。想着痛定思痛还是升吧。那么，vue2转vue3需要怎么配置呢？。

2. 根据你的项目背景自己选

1）工具gogocode

如果项目是用vue-cli搭的，就可以用gogocode，用gogocode升之前，建议把vue-cli升级至3.0及以上版本。官方迁移地址：https://gogocode.io/zh/docs/vue/vue2-to-vue3

2）手动迁移

手动迁移，可参考这篇：https://www.cnblogs.com/miangao/p/17620946.html#autoid-2-32-0

3. 用gogocode迁移步骤

1）全局安装最新的 gogocode-cli

npm install gogocode-cli -g

2）项目src下文件备份

做这个主要是怕转换工具出错，把原先的项目代码给覆盖了，因此可以先备份一下。

3）升级src路径下的vue代码

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

在这里执行的时候，我的项目执行出错了，看了一下，报错问题是项目的node版本过低，需升级才可以迁移，升级node:

sudo n v18.12.1

18.12.1这个版本应该够了，升级后，再执行之前那个步骤，截图如下：

4）升级依赖

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

这条命令主要是把 package.json 里面的 Vue/Vuex/Vue-router/Vue 等编译工具升级到适配 Vue3 的版本

5）安装依赖

npm install

4. 升级之后

以上步骤完成后，将转换后的输出文件src-out重命名为src文件，打开文件，可以发现里面还有一堆报红的问题，别焦虑哈，我们继续往下解决。

1）RouteConfig报错，这里是因为vue3对路由接口做个更改

改成

可参考地址：https://vue3.chengpeiquan.com/router.html，其中“了解vue3”中有写。

2）vue文件内部，这个需要把项目里的每个页面都需要手动修改

改成：

3）App报错

改成：
在shims-vue.d.ts文件中添加如下：

declare module '*.vue' {
 import type { DefineComponent } from 'vue'
 const component: DefineComponent<{}, {}, any>
 export default component
}

可参考地址：https://segmentfault.com/q/1010000042300784

4) 命名报错

改成：
.eslintrc.js 添加

rules: {
	"vue/multi-word-component-names": [
      "error",
      {
        ignores: ["index"], //需要忽略的组件名
      },
    ]
}

5) 这个问题主要是因为路由里我配了path:“/*”导致报错了

改成：

6）npm run server后有警告

改成：

5.总结

整体下来升级过程还算挺顺利，但升级后会因为项目情况有各类报错问题，大部分其实都是好解决的，除开项目中如果引入了一些三方依赖，那就可能需要先卸载掉，再重新装最新的。