vue2升级vue3踩坑记录（一）

首先老老实实的按照用于迁移的构建版本-准备工作升级开发依赖。

原来开发依赖如下：

"dependencies": {
    "ant-design-vue": "^1.7.2",
    "axios": "^0.21.1",
    "core-js": "^3.11.3",
    "crypto-js": "^4.1.1",
    "dhtmlx-gantt": "^7.1.9",
    "echarts": "^4.9.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "nprogress": "^0.2.0",
    "resize-detector": "^0.2.2",
    "v-contextmenu": "^2.9.0",
    "vue": "^2.6.11",
    "vue-router": "^3.5.3",
    "vue-runtime-helpers": "^1.1.2",
    "vuedraggable": "^2.24.3",
    "vuex": "^3.4.0",
    "vuex-persistedstate": "^3.2.0"
  },
  "devDependencies": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "babel-plugin-import": "^1.13.3",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "@vue/cli-plugin-router": "^4.5.12",
    "@vue/cli-plugin-unit-jest": "^4.5.12",
    "@vue/cli-plugin-vuex": "^4.5.12",
    "@vue/cli-service": "^4.5.12",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^1.2.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.11"
  }

按照迁移文档准备工作要求完成了前3个步骤，以及步骤8、9、10。

项目启动开发依赖报错

于是我重新启动项目，启动失败，并且报如下错：

Syntax Error: TypeError: eslint.CLIEngine is not a constructor

好吧，应该是eslint版本没有升级，于是乎我升级了eslint版本。启动项目后提示了好多语法错误，我才反应过来，eslint-plugin-vue也要升级。经过两三次尝试以后，最终项目启动成功，升级后的项目配置如下：

"dependencies": {
    "@ant-design/icons-vue": "^6.1.0",
    "ant-design-vue": "^2.2.8",
    "axios": "^0.21.1",
    "core-js": "^3.11.3",
    "crypto-js": "^4.1.1",
    "dhtmlx-gantt": "^7.1.9",
    "echarts": "^4.9.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "nprogress": "^0.2.0",
    "resize-detector": "^0.2.2",
    "v-contextmenu": "^3.0.0",
    "vue": "^3.2.7",
    "vue-router": "^4.0.15",
    "vue-runtime-helpers": "^1.1.2",
    "vuedraggable": "^4.1.0",
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-plugin-vuex": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.1.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.5",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "prettier": "^2.2.1"
  }

项目开发依赖升级心得：
使用的插件和开发依赖都要尽可能检查一遍，使用比较新的版本

ant-design-vue报错

项目启动后，我在浏览器上访问项目，嗯，很不意外的跑不起来，ant-design-vue的组件一直报错！！！，错误信息大概如下:

Async component <Empty> should be explicitly created via `defineAsyncCompon....
inject() can only be used inside setup() or functional components

即使我按照迁移版本指南配置COMPONENT_ASYNC和 COMPONENT_FUNCTIONAL也不管用，依旧报错。
于是我去翻了ant-design-vue的从V1到V2升级指南，里面文档描述的是：

Vue 最低支持版本为 Vue 3.0。

而且准备工作里也写了

基于 Vue 2 内部 API 或文档中未记载行为的依赖。最常见的情况就是使用 VNodes 上的私有 property。如果你的项目依赖诸如 Vuetify、Quasar 或 Element UI 等组件库，那么最好等待一下它们的 Vue 3 兼容版本。

好吧，那ant-design-vue既然没有兼容版本，我又想升级，那我就跳过vue3兼容版本，直接使用vue3吧。

gogocode升级代码后vue-router的路由懒加载语法bug

于是我打着胆子，使用gogocode直接升级，升级完毕后，再解决报错。gogocode的使用方法链接里自己看。这里记录一个使用gogocode升级过程中，vue-router的路由懒加载语法bug。

{
      path: "dd-login",
      name: "ddLogin",
      meta: {
        title: "钉钉登录",
        unwantedLogin: true,
        unNeedAuth: true,
        logo: false
      },
      component: Vue.defineAsyncComponent(() => import("@/views/dd/login"))// 这里是转换错误的，实际运行会报错
    },

在vue3中异步组件使用如上的写法当然没错，但是翻阅vue-router 4版本-- 路由懒加载一章，写法仍和以前保持一致。

修改根组件实例的样式

vue2，调用vm.$mount(‘#app’)实例方法，创建并挂载到 #app (会替换 #app)

vue3，app.mount(‘#app’),渲染结果是 #app的 innerHTML

如果你的项目启动成功，在浏览器上打开，没有报错信息，却只是空白页面，大部分是因为根组件实例渲染的节点变化了，改一下样式，原来的页面就会出现了。

项目能运行起来了，剩下的就是按照各种迁移指南修改语法即可，比较坑的点我会在(二)中记录