vue2项目升级到vue3经历分享1

依据vue官方文档，vue2在2023年12月31日终止维护。因此决定将原来的岁月云记账升级到vue3，预计工作量有点大，于是想着把过程记录下来。
原系统使用的技术栈

"dependencies": {
    "axios": "^0.21.1",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "clipboard": "^2.0.6",
    "core-js": "^3.6.5",
    "echarts": "^5.0.1",
    "element-china-area-data": "^5.0.2",
    "element-ui": "^2.15.2",
    "file-saver": "^2.0.5",
    "js-cookie": "2.2.0",
    "js-md5": "^0.7.3",
    "jsencrypt": "^3.2.1",
    "less": "^4.1.0",
    "less-loader": "^7.2.1",
    "moment": "^2.24.0",
    "nprogress": "0.2.0",
    "pinyin-match": "^1.2.2",
    "postcss-plugin-px2rem": "^0.8.1",
    "resize-detector": "^0.2.2",
    "uuid": "^8.3.2",
    "vue": "^2.6.11",
    "vue-router": "^3.0.7",
    "vuex": "3.0.1",
    "xlsx": "^0.17.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "compression-webpack-plugin": "^5.0.0",
    "crypto-js": "^4.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "file-loader": "^6.2.0",
    "fingerprintjs2": "^2.1.4",
    "image-webpack-loader": "^7.0.1",
    "lodash-webpack-plugin": "^0.11.6",
    "mini-css-extract-plugin": "^1.5.0",
    "quill-image-extend-module": "^1.1.2",
    "url-loader": "^4.1.1",
    "vue-quill-editor": "^3.0.6",
    "vue-template-compiler": "^2.6.11"
  },

新系统使用的技术栈如下，可以看到至少有下面几点变化

1. 代码编译从webpack调整为vite
2. 前端界面框架从element-ui升级到element-plus
3. 状态管理从vuex调整为pinia
4. 支持typescript
5. 菜单框架调整为多页签模式
6. api调整为动态加载，页面路径调整为动态加载。

"dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@tinymce/tinymce-vue": "5.0.0",
    "axios": "^1.6.1",
    "codemirror": "5.65.5",
    "cropperjs": "^1.6.1",
    "crypto-js": "4.1.1",
    "docx-preview": "^0.3.0",
    "echarts": "^5.4.3",
    "element-china-area-data": "5.0.2",
    "element-plus": "2.2.32",
    "js-cookie": "^3.0.5",
    "js-md5": "^0.8.3",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
    "pinyin-match": "1.2.2",
    "resize-detector": "0.2.2",
    "sortablejs": "^1.15.0",
    "tinymce": "6.3.2",
    "uuid": "^9.0.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@types/node": "18.11.11",
    "@vitejs/plugin-vue": "^3.2.0",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "less": "^4.2.0",
    "less-loader": "^11.1.3",
    "postcss-plugin-px2rem": "^0.8.1",
    "tailwindcss": "^3.4.3",
    "typescript": "^4.9.3",
    "unplugin-auto-import": "^0.16.7",
    "unplugin-icons": "^0.17.4",
    "unplugin-vue-components": "^0.25.2",
    "vite": "^3.2.3",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-html": "3.2.0",
    "vue-tsc": "^1.0.11"
  }

1 界面相关
1.1 slot插槽
slot-scope="scope" 批量更改为#default="scope"
v-slot="scope"统一调整为#default="scope"
template slot="header"统一调整为template #header
template slot="title"统一调整为template #title
slot-scope="{ node, data }"逐个调整为<template #default="{ node,data }">

1.2 jsx语法问题
在vue2开发项目中经常遇到一些动态的dom节点，升级到vue3中，提示The JSX syntax extension is not currently enabled,这个问题也是比较头痛。

引入@vitejs/plugin-vue-jsx,在vite.config.ts中配置jsx语法支持，

进入到对应的界面，添加lang="jsx"

在使用到标签，增加h函数
将原来的

render: (h, data) => {
              return (<span>{(data.row.period != '' && data.row.period != null) ? data.row.period + '年' : ''}</span>)
            }

调整为

render: (data) => {
              return h(<span>{(data.row.period != '' && data.row.period != null) ? data.row.period + '年' : ''}</span>)
            }

1.3 作废的引用

1.4 图片require引入的问题
例如下面的代码，会提示index.vue:129 Uncaught (in promise) ReferenceError: require is not defined
因为vite是基于 ES Modules，因此不支持CommonJS 的require写法

故而按照url: new URL('@/assets/home/balance.png',import.meta.url).href, 图片就可以正常加载了

应调整为

1.5 :key=“index”
vue2中:key="index"可以瞎放，但vue3中，就会提示 [vite:vue] <template v-for> key should be placed on the <template> tag

2 api请求
看到下面这个结果真是头大，工程师是不是在摸鱼，复制、粘贴不用动脑，为何不写一个指令来实现。只能一个个改。这个里面的工作量非常之大，得耐心去调整。也可以借助Fitten CodeAi插件,可以把重复的事情，自动联想出来，还是可以加速的

新的api
2.1 this.$store.dispatch

看看原来的store方式调用api，写法确实冗余拖拉，没有新的方式简洁


新方式，一句话定义完了，不用搞那么多绕绕。

2.2 直接应用api方法
有一些人并不是直接用dispatch模式，例如这样的，是直接引用了api里面的方法

另外需要注意加上async

这种类型就有57处，看来代码走查非常有必要，当时做项目确实疏忽了这个事情，最后前端工程师离职了，吃亏的就是留下来的人。前提还得你懂前端，光靠前端技术经理，这个事情也是够呛。

2.3 axios请求
还有人在页面直接写了axios调用,这些也需要统一调整过来，真是一个修行的过程，花了我一天的时间，将256处直接用axios的请求调整过来。

继续重构代码，发现还有这样打开界面的,通过window.open直接打开界面,这样的代码都属于比较隐蔽的。

3 存储相关
可以参考我之前写的文档多租户平台前端存储结构的选择，工程师采用vuex存储状态，肯定不合理，结果就是多租户被架空。像这类问题估计99%的前端开发工程师面试一定能答上来，但是实际应用就只能呵呵了。

4 状态管理
因为使用的是pina,因此下面的写法就失效了。mapState和mapGetters`,因此这块的工作量也是比较大的

  import {mapGetters, mapState} from "vuex";
  computed: {
      ...mapState({
        periodOptions: function (state) {
          return state.accountSets.periodOptions
        },
      }),
      ...mapGetters([
        'changeSubject',
        'initTreeStatus',  
        'categoryTrees',
        'allSubject',
        'bindTime',
      ]),
    },

因为pinia中没有，故而需要调整。

5 Vite相关
服务起来，并不代表迁移的页面一定能运行，因为菜单都调整了，这个问题就不好排查了，因为不知道是那个地方会造成循环调用。

vue-router.js?v=e7f9366d:1117 Uncaught RangeError: Maximum call stack size exceeded
    at [Symbol.replace] (<anonymous>)
    at String.replace (<anonymous>)
    at commonEncode (vue-router.js?v=e7f9366d:1117:31)
    at encodeQueryValue (vue-router.js?v=e7f9366d:1123:10)
    at encodeQueryKey (vue-router.js?v=e7f9366d:1126:10)
    at stringifyQuery (vue-router.js?v=e7f9366d:1169:11)
    at stringifyURL (vue-router.js?v=e7f9366d:73:35)
    at resolve (vue-router.js?v=e7f9366d:2084:22)
    at pushWithRedirect (vue-router.js?v=e7f9366d:2145:46)
    at pushWithRedirect (vue-router.js?v=e7f9366d:2152:14)

遇到这个问题，不知道从哪里下手，调试pushWithRedirect ，发现有一个\的路由，那么第6感告诉我，这个地方会不会因为这个路由导致的。
从代码可以看到/在路由中，被重定向到sysConfig.DASHBOARD_URL，那么如果这个sysConfig.DASHBOARD_URL是\，重定向后发生死循环，于是就出现了上面的错误。

5.1 全局组件

在vue3中写法稍微有差异,在vite中使用完整路径

尽量不使用window.xx这种全局
5.2 不支持require
vite不支持requre，因此下面的写法是有问题的

5.3 组件全路径
vite中引入组件是全路径，故而下面的写法要调整

下面的引用必须是./table.vue，否则yarn build的时候编译不过去