现有Vue 3.1项目如何升级到Vue 3.2版本？

前置操作 #

• 提交当前项目所有未保存的代码变更到版本管理系统，避免升级失败无法回滚
• 备份项目根目录下的package.json以及对应的依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）

依赖升级 #

根据你使用的包管理工具执行对应命令：

npm #

• 基础升级命令：

npm install vue@^3.2.0 @vue/compiler-sfc@^3.2.0 --save

• 若为Vite构建项目，额外执行：

npm install @vitejs/plugin-vue@^2.0.0 --save-dev

• 若为Vue CLI构建项目，额外执行：

npm install @vue/cli-service@^5.0.0 --save-dev

yarn #

• 基础升级命令：

yarn upgrade vue@^3.2.0 @vue/compiler-sfc@^3.2.0

• 若为Vite构建项目，额外执行：

yarn upgrade @vitejs/plugin-vue@^2.0.0 --dev

• 若为Vue CLI构建项目，额外执行：

yarn upgrade @vue/cli-service@^5.0.0 --dev

pnpm #

• 基础升级命令：

pnpm update vue@^3.2.0 @vue/compiler-sfc@^3.2.0

• 若为Vite构建项目，额外执行：

pnpm update @vitejs/plugin-vue@^2.0.0 -D

• 若为Vue CLI构建项目，额外执行：

pnpm update @vue/cli-service@^5.0.0 -D

不兼容变更适配 #

3.2 仅存在少量破坏性变更，按项目实际使用场景适配即可：

• 全局配置app.config.isCustomElement已废弃，需迁移到编译器配置中：
  • Vite项目：在vite.config.js的vue插件配置项中添加isCustomElement属性
  • Vue CLI项目：在vue.config.js的compilerOptions配置项中添加isCustomElement属性
• 深度选择器的非标准写法::v-deep、/deep/已标记为待废弃，建议统一替换为标准语法:deep()
• 仅自定义渲染器相关项目需适配：@vue/runtime-core的createRenderer入参类型有调整，普通业务项目无需处理该内容

升级验证 #

• 执行本地开发启动命令，检查所有页面功能、控制台是否有报错
• 执行生产打包命令，确认打包无报错，打包后的产物可正常运行
• 可在入口文件中添加console.log(Vue.version)确认当前运行的Vue版本是否为3.2.x分支

内容的提问来源于stack exchange，提问作者pbz