使用自动化升级工具进行Vue的升级

使用自动化升级工具进行Vue2到Vu3的升级

在 Vue 3 的项目里，有一个 @vue/compat 的库，这是一个 Vue 3 的构建版本，提供了兼容 Vue 2 的行为。这个版本默认运行在 Vue 2 下，它的大部分 API 和 Vue 2 保持了一致。当使用那些在 Vue 3 中发生变化或者废弃的特性时，这个版本会提出警告，从而避免兼容性问题的发生，帮助你很好地迁移项目。并且通过升级的提示信息，@vue/compat还可以很好地帮助你学习版本之间的差异。

在下面的代码中，首先我们把项目依赖的 Vue 版本换成 Vue 3，并且引入了@vue/compat 。

"dependencies": {
-  "vue": "^2.6.12",
+  "vue": "^3.2.19",
+  "@vue/compat": "^3.2.19"
   ...
},
"devDependencies": {
-  "vue-template-compiler": "^2.6.12"
+  "@vue/compiler-sfc": "^3.2.19"
}

然后给 vue 设置别名@vue/compat，也就是以 compat 作为入口，代码如下：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('vue', '@vue/compat')
    ......
  }
}

这时你就会在控制台看到很多警告，以及很多优化的建议。