1. 升级前的准备工作
每次框架升级都是一次技术债的偿还过程，特别是像Vue这样深度集成的框架。我在最近的一个企业级后台管理系统项目中，就经历了从Vue2.6到2.7的升级过程。这个项目采用了多页面架构，使用了vue-cli5作为构建工具，整个升级过程踩了不少坑，也积累了不少实战经验。
首先需要明确的是，Vue2.7作为Vue2.x的最后一个次级版本，最大的价值在于它引入了Vue3的组合式API特性，同时保持了Vue2的稳定性。这对于那些暂时无法升级到Vue3的大型项目来说，无疑是个福音。
在开始升级前，我强烈建议做好以下准备工作：
确保项目使用git进行版本控制，并且所有修改都已提交。升级过程中会产生大量文件变更，良好的版本控制能让你在出现问题时快速回退。
备份重要配置文件，特别是vue.config.js、babel.config.js、.eslintrc.js等。这些文件在升级过程中很可能会被修改。
记录当前项目中使用的重要第三方库及其版本号。升级后可能需要相应调整这些依赖的版本。
# 查看当前vue-cli版本 vue --version # 查看项目中vue相关依赖版本 npm list vue @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint2. 基础依赖升级
2.1 vue-cli升级实战
升级vue-cli是整个过程中最基础也最关键的一步。我推荐使用vue-cli自带的升级命令，这能最大程度减少手动操作带来的错误。
# 首先确保安装了最新版的vue-cli npm install -g @vue/cli # 在项目目录下执行升级命令 vue upgrade执行这个命令时，控制台会交互式地询问你是否要升级各个插件。在我的项目中，它帮我自动升级了@vue/cli-service、@vue/cli-plugin-babel和@vue/cli-plugin-eslint到5.x版本。
不过要注意，vue upgrade命令有时并不能解决所有问题。在我的实践中发现，对于多页面应用，还需要手动检查以下配置：
- 确保package.json中的vue-cli相关依赖版本正确：
{ "devDependencies": { "@vue/cli-plugin-babel": "^5.0.8", "@vue/cli-plugin-eslint": "^5.0.8", "@vue/cli-service": "^5.0.8" } }- 如果遇到依赖冲突，可以尝试使用：
npm install --legacy-peer-deps2.2 Vue核心库升级
升级Vue本身到2.7.x版本相对简单，但有几个关键点需要注意：
# 升级vue到2.7.x npm install vue@2.7 # 移除不再需要的vue-template-compiler npm uninstall vue-template-compiler这里有个例外情况：如果你的项目使用了@vue/test-utils进行单元测试，那么vue-template-compiler需要保留，因为测试工具依赖它提供的某些API。
升级后，我建议立即运行项目，检查控制台是否有报错。常见的初期问题包括：
- 某些依赖需要同步升级（如vue-router、vuex）
- 自定义指令可能需要调整
- 第三方组件库可能需要更新版本
3. 多页面应用的特殊适配
3.1 配置迁移技巧
多页面应用在vue-cli5下的配置方式有了一些变化。原来的配置可能长这样：
// vue.config.js (旧版) module.exports = { pages: { index: { entry: 'src/pages/index/main.js', template: 'public/index.html', filename: 'index.html' }, admin: { entry: 'src/pages/admin/main.js', template: 'public/admin.html', filename: 'admin.html' } } }在vue-cli5中，推荐使用defineConfig来包裹配置：
// vue.config.js (新版) const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ pages: { index: { entry: 'src/pages/index/main.js', template: 'public/index.html', filename: 'index.html' }, admin: { entry: 'src/pages/admin/main.js', template: 'public/admin.html', filename: 'admin.html' } } })3.2 预加载插件问题解决
在多页面应用中，我们经常需要配置preload-webpack-plugin来优化资源加载。在vue-cli5中，这个配置方式发生了变化：
// 旧版配置 Object.keys(pages).forEach(name => { config.plugin(`preload-${name}`) .tap(() => [{ rel: 'preload', fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], include: 'initial' }]) }) // 新版配置 Object.keys(pages).forEach(name => { config.plugin(`preload-${name}`) .use(require('@vue/preload-webpack-plugin'), [{ rel: 'preload', fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], include: 'initial' }]) })注意这里需要先安装@vue/preload-webpack-plugin：
npm install @vue/preload-webpack-plugin@2 -D4. 常见问题与解决方案
4.1 Webpack5相关适配
Vue-cli5底层使用Webpack5，这带来了一些破坏性变更。最常见的问题是Node.js核心模块不再自动polyfill。例如，如果你在代码中使用了path模块：
const path = require('path')现在需要显式配置polyfill：
npm install path-browserify -D然后在vue.config.js中配置：
module.exports = defineConfig({ configureWebpack: { resolve: { fallback: { path: require.resolve('path-browserify') } } } })4.2 SVG加载问题
如果你的项目使用了svg-sprite-loader，可能会遇到以下错误：
Error: Cannot find module 'webpack/lib/RuleSet'解决方案是升级svg-sprite-loader到v6版本：
npm install svg-sprite-loader@6 -D4.3 ESLint配置调整
升级后ESLint可能会报告大量新错误，特别是如果你计划使用
