参考文档：迁移至 Vue 2.7 — Vue.js

迁移至 Vue2.7

升级指南

Vue CLI / webpack

1. 升级 Vue CLI

将本地的 @vue/cli-xxx 依赖升级至所在主版本范围内的最新版本 (如有)：

  • v4 升级至 ~4.5.18

  • v5 升级至 ~5.0.6

升级 @vue/cli 依赖：

npm install @vue/cli@^4.5.18 		# npm
yarn add @vue/cli@^4.5.18 		 	# yarn

校验 @vue/cli 依赖：

npm list @vue/cli  	 	# npm
yarn list @vue/cli 		# yarn

2. 升级至 Vue2.7

将 vue 升级至 ^2.7.0。同时你可以从依赖中移除 vue-template-compiler—— 它在 2.7 中已经不再需要了。注意：如果你在使用 @vue/test-utils，那么 vue-template-compiler 需要保留，因为该测试工具集依赖了一些只有这个包会暴露的 API。

升级 Vue 到 ^2.7.0：

npm install vue@^2.7.0 		# npm
yarn add vue@^2.7.0 		 	# yarn

移除 vue-template-compiler 依赖：

npm uninstall vue-template-compiler 		# npm
yarn remove vue-template-compiler 		 	# yarn

确保保留 vue-template-compiler 依赖：

npm install vue-template-compiler 		# npm
yarn add vue-template-compiler 		 	  # yarn

3. 检查版本锁定文件

检查包管理工具的版本锁定文件，以确保以下依赖的版本符合要求。它们可能是间接依赖所以未必罗列在了 package.json 中。

  • vue-loader: ^15.10.0

  • vue-demi: ^0.13.1

否则，你需要移除整个 node_modules 和版本锁定文件，然后重新安装，以确保它们都升到了最新版本。

检查包管理工具的版本锁定文件，以确保依赖的版本符合要求，你需要查看项目中的 package-lock.json 文件（如果你使用 npm）或者 yarn.lock 文件（如果你使用 yarn）。这些文件会记录项目中所有依赖项的详细信息，包括版本号。

找到 package-lock.json 或者 yarn.lock 文件。然后搜索两个依赖项：vue-loader: ^15.10.0、vue-demi: ^0.13.1，确保版本符合。

4. 其他事项

  1. 如果你曾经使用了 @vue/composition-api，将其导入语句切换至 vue 即可。注意有些之前通过插件暴露的 API，例如 createApp，并没有被移植回 2.7。

  2. 如果你在 <script setup> 中遇到了未使用变量的 lint 错误，请更新 eslint-plugin-vue 至最新版本 (9+)。

  3. 2.7 的单文件组件编译器使用了 PostCSS 8 (从 7 升级而来)。PostCSS 8 应该向下兼容了绝大多数插件，但是该升级可能在你使用了一些只支持 PostCSS 7 的自定义插件时遇到问题。这种情况下，你需要升级相应的插件至其兼容 PostCSS 8 的版本。