前言

最近入职了一家新公司，遇到一个Vue2的老项目，在公司有升级Vue3的意愿的前提下，笔者专门抽出了2天的时间对项目进行了升级。

过程中遇到了很多问题，好在最后还是解决并升级成功了，废话不多说直接上干货。

前期准备

部署的服务器node版本必须兼容Vue3(Node.js v8.9 或更高版本,推荐 v10 以上)。
如果项目代码量较大则需要较长的时间，当然根据项目所用的技术不同，升级所需的时间也会不同。
足够的知识储备，必须明确的了解升级后相关依赖的代码如何重构。必会的：Vue router4.x、Vue cli5 。

详细步骤

第一步

首先第一步应当将vue 2.X.X升级至~2.7.0。将package.json的dependencies中的vue版本替换为以下版本

"dependencies"：{
    ...
    "vue": "^~2.7.0"
    ...
   }

替换完成后删除node_modules文件夹和package-lock或yarn-lock，并重新执行

npm i 
或 
yarn install

安装成功后运行调试项目，vue2.7是vue2的最后一个版本，其兼容vue2的语法并且新增了setup方法，我们升级vue2.7的目的就是将其作为我们迁移至vue3的中间版本，将相关代码全部重构为setup语法后再升级vue3。

第二步

第二步是我们的重头戏，将所有的.vue文件结尾的组件改成setup的语法，毕竟我们升级vue3就是为了使用setup。

重构是每个项目肯定有不一样的地方，但笔者看来重构难度并不算很大，主要就算工作量大一些。以下列举一些重构过程中可能遇到的问题：

如果你希望使用setup语法糖，那么<script setup></script>标签立是没有this属性的。所以原来的this.$route就不能用了，Vue3中router是使用useRout和useRouter的，如果想要使用可以在router文件中添加如下代码来解决：

 export function useRouter() {
   return  router;
 }

 export function useRoute() {
   return router.currentRoute;
 }

 const router = new Router({
   mode: "hash",
   routes: [
     {
       path: "/",
       // component: () => import("@/pages/home/Home.vue"),
       component: Home
     },
   ],
 });

如果实在需要使用this的组件，建议可以暂时不使用setup语法糖，仅将相关功能写入setup方法内，等到完全升级为vue3后使用完整的vue3生态解决问题。
vue2.7暂时无法使用vue3.x相关生态，所以不要提前升级相关依赖。
vue3弃用了Filters如果你的项目有使用此功能，一定要在vue2.7版本就将其解决掉，建议改为计算属性实现相关功能。
templent代码中所有slot应改为 v-slot，slot在vue3中将被弃用。
vue3移除$on,$off和$once这三个实例方法，官方推荐改用第三方库mitt来代替。

第三步

在完成第二步后，我们需要新建一个纯净vue3项目。搭建项目有两个选择：

如果你足够了解vite建议使用vite搭建项目，并将vue.config.js的相关代码以vite的形式实现。
或者选择VueCli4.5以上的版本进行项目搭建。cli版本升级

这里笔者是采用的第二种方式因此以下已仅针对cli搭建。

在搭建好纯净项目后先将vue.config.js复制进我们的纯净项目，但此时肯定是无法运行的，因为部分属性都有所调整，包括webpack相关配置（因webpack集成在了cli里，其集成的webpack版本也不一致）。

此时我们先前往vuecli的官网将相关属性进行调整，直到项目可以正常运行为止。

第四步

然后就是最容易出问题的，把所有依赖项引入新项目：

首先不能直接复制，再改版本号安装，这样太麻烦，我们按照必要、能用就行、和可有可无对依赖进行分类，优先安装必要的依赖。

1.必要：router 、VueX（后面再改pinia）、Vant\elm\antd-vue（UI框架）

2.能用就行：axios、typeScript、各种第三方库、less\sass\stylus。

3.可有可无：eslint、各种包的tyoescript开发依赖

必要的依赖需严格按照官方推荐的版本进行安装，目前一般安装最新版即可，我们安装此类依赖也是能用最新的就用最新的。

能用就行的依赖不一定需要安装最新的，并且个人也不推荐安装最新的，因为会出现各种依赖冲突，建议安装前先查看相关依赖的版本，安装第二新的大版本内挑选小版本安装。例如这里我们就可以选择红框内的版本安装。

    npm view *** versions

可有可无的依赖一般为开发依赖，我们在前两项调整完没有问题且可以运行的时候再添加相关依赖，这些依赖需要根据前两项的依赖版本调整。

调整完依赖版本一定要重装node_modules并运行调试！

重要的事说三遍，如果安装或启动有错误及时根据报错信息调整版本。

调整完必要依赖和能用就行的依赖后即可将所有src、public的代码复制进纯净的项目。此时我们必须优先修改VueX、router和main.ts。

VueX建议重构为pinia，若想继续使用可以前往官网查看vueX非兼容性变更

vueRouter语法

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

当然别忘了把之前代码里的useRouter和useRoute的路径改成

  import {useRouter,useRoute} from "vue-router"

Vue3的main.ts写法:

  import { createApp } from "vue";
  import router from "./router";
  import Antd from 'ant-design-vue';
  const app = createApp(App);
  app.use(router) ;
  app.use(Antd);
  ...
  app.mount("#app");

完成了以上这些相信你的代码就可以尝试运行了，如果成功运行那么恭喜你此次升级你已经完成了95%了，后续只需要安装相关开发依赖就行了。

最后的最后，提交我们的新项目的代码。

记录Vue2升级Vue3（内含升级过程中遇到的问题）

前言

前期准备

详细步骤

第一步

第二步

第三步

第四步