Vue项目升级@vue/cli-service至v5.0.8后出现Progress Plugin配置错误

执行npm audit fix修复安全漏洞后，将@vue/cli-service从v4.5.17升级到v5.0.8，出现Progress Plugin配置无效的错误。项目当前依赖版本如下：

"dependencies": {
  "core-js": "^3.6.5",
  "idle-vue": "^2.0.5",
  "moment": "^2.29.4",
  "text-mask-addons": "^3.8.0",
  "v-mask": "^2.2.4",
  "vue": "^2.6.11",
  "vue-moment": "^4.1.0",
  "vue-router": "^3.2.0",
  "vuetify": "^2.6.13",
  "vuex": "^3.4.0"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-plugin-eslint": "~4.5.0",
  "@vue/cli-plugin-router": "~4.5.0",
  "@vue/cli-plugin-vuex": "~4.5.0",
  "@vue/cli-service": "~4.5.0",
  "axios": "^0.18.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^6.7.2",
  "eslint-plugin-vue": "^6.2.2",
  "node-sass": "^4.12.0",
  "sass": "^1.32.0",
  "sass-loader": "^10.0.0",
  "vue-cli-plugin-axios": "^0.0.4",
  "vue-cli-plugin-vuetify": "^2.4.5",
  "vue-template-compiler": "^2.6.11",
  "vuetify-loader": "^1.7.0"
}

1. 统一升级所有@vue/cli插件到v5版本 #

单独升级@vue/cli-service会导致与其他v4版本的@vue/cli插件依赖冲突，需同步升级所有相关插件：

npm update @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service --save-dev

2. 适配webpack 5的Progress Plugin配置 #

@vue/cli-service v5基于webpack 5，而webpack 5的ProgressPlugin配置项与webpack 4存在较大差异，需调整配置：

原webpack 4兼容配置（可能存在于vue.config.js）： #

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProgressPlugin({
        colors: true,
        profile: true
      })
    ]
  }
}

调整为webpack 5兼容配置： #

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProgressPlugin({
        handler(percentage, message) {
          // 自定义进度输出逻辑，也可保留默认行为
          console.log(`${(percentage * 100).toFixed(2)}% ${message}`)
        },
        // 可选：根据需求启用其他配置项
        modules: true,
        dependencies: true
      })
    ]
  }
}

若使用chainWebpack配置： #

module.exports = {
  chainWebpack: config => {
    config.plugin('progress').tap(args => {
      // 重置ProgressPlugin参数为webpack 5兼容格式
      args[0] = {
        handler(percentage, message) {
          console.log(`${(percentage * 100).toFixed(2)}% ${message}`)
        }
      }
      return args
    })
  }
}

3. 处理其他依赖兼容问题 #

• sass-loader与sass：webpack 5要求sass-loader版本不低于v12，且node-sass已停止维护，建议替换为sass（dart-sass）：

npm uninstall node-sass
npm install sass sass-loader@^12 --save-dev

• eslint生态：@vue/cli-plugin-eslint v5兼容eslint v7+，需升级相关依赖：

npm update eslint eslint-plugin-vue --save-dev

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