Vue2+Vuetify项目Progress Plugin配置参数无效报错求助

项目环境版本 #

Vue version 2.7.14
npm version 8.15.0
Vue cli 4.5.13
node version v14.18.0
Vuetify 2.6.12

报错信息 #

ValidationError: Progress Plugin Invalid Options

options should NOT have additional properties
options should NOT have additional properties
options should NOT have additional properties
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

项目devDependencies #

"devDependencies": {
  "@babel/core": "~7.2",
  "@babel/plugin-proposal-class-properties": "~7.3",
  "@babel/plugin-proposal-decorators": "~7.3",
  "@babel/plugin-proposal-json-strings": "~7.2",
  "@babel/plugin-syntax-dynamic-import": "~7.2",
  "@babel/plugin-syntax-import-meta": "~7.2",
  "@babel/preset-env": "~7.3",
  "@fortawesome/fontawesome-free": "^5.15.4",
  "@vue/cli-plugin-babel": "^3.12.1",
  "@vue/cli-plugin-eslint": "^5.0.8",
  "@vue/cli-service": "^5.0.8",
  "babel-eslint": "^10.1.0",
  "babel-loader": "~8.0",
  "compression-webpack-plugin": "6.0.3",
  "cross-env": "~5.2",
  "css-loader": "5.0.0",
  "deepmerge": "^4.2.2",
  "eslint": "^5.16.0",
  "eslint-plugin-vue": "^5.2.3",
  "friendly-errors-webpack-plugin": "~1.7",
  "html-webpack-plugin": "^5.5.0",
  "mini-css-extract-plugin": "^0.5.0",
  "optimize-css-assets-webpack-plugin": "~3.2",
  "sass": "~1.32",
  "sass-loader": "^10",
  "uglifyjs-webpack-plugin": "^1.1.2",
  "vue-avatar-cropper": "^5.0.2",
  "vue-cli-plugin-vuetify": "^0.4.6",
  "vue-loader": "~15.6",
  "vue-style-loader": "~4.1",
  "vue-template-compiler": "^2.7.8",
  "vuetify-loader": "^1.9.2",
  "webpack": "~4.29",
  "webpack-bundle-analyzer": "^4.7.0",
  "webpack-cli": "4.1.0",
  "webpack-dev-server": "^4.11.1",
  "webpack-hot-middleware": "^2.25.1",
  "webpack-merge": "~4.2"
}

问题根源与修复步骤 #

1. 核心问题：版本不兼容 #

你当前使用Vue CLI 4.5.13，但安装了Vue CLI 5系列的@vue/cli-service和@vue/cli-plugin-eslint，同时webpack-dev-server 4.x与webpack 4.x无法适配，这些版本冲突直接导致Progress Plugin的参数验证失败。

2. 分步修复 #

• 卸载不兼容的高版本依赖，安装匹配Vue CLI 4的版本：

  npm uninstall @vue/cli-service @vue/cli-plugin-eslint @vue/cli-plugin-babel webpack-dev-server
  npm install @vue/cli-service@4.5.13 @vue/cli-plugin-eslint@4.5.13 @vue/cli-plugin-babel@4.5.13 webpack-dev-server@3.11.3 --save-dev
  

• 清理旧依赖并重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

3. 额外检查 #

如果修复后仍报错，打开项目根目录的vue.config.js，确认是否存在自定义配置Progress Plugin的代码，若有则删除或调整为符合webpack 4的配置格式。

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