You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vue2.7与Webpack5兼容疑问:Progress Plugin配置报错求助

Vue2.7 + Vue CLI5 搭配Webpack5启动时Progress Plugin参数错误问题

我花了好几个小时查阅大量帖子,没找到合适的解决办法。为了将Vue2与Webpack5搭配使用,我把Vue升级到了^2.7.14,Vue CLI及其插件升级到^5.0.6——根据Vue和Vue CLI官方文档,这些版本应该支持Webpack5。但执行npm run serve时仍报错,错误信息如下:

ERROR  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

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

    at validateOptions (C:\Project\workmanager-frontend\node_modules\webpack\node_modules\schema-utils\src\validateOptions.js:32:11)
    at new ProgressPlugin (C:\Project\workmanager-frontend\node_modules\webpack\lib\ProgressPlugin.js:62:3)
    at new Progress (C:\Project\workmanager-frontend\node_modules\progress-webpack-plugin\index.js:25:21)
    at new progressPlugin (C:\Project\workmanager-frontend\node_modules\progress-webpack-plugin\index.js:127:10)
    at C:\Project\workmanager-frontend\node_modules\webpack-chain\src\Plugin.js:14:18
    at Object.toConfig (C:\Project\workmanager-frontend\node_modules\webpack-chain\src\Plugin.js:78:22)
    at C:\Project\workmanager-frontend\node_modules\webpack-chain\src\Config.js:129:63
    at Array.map (<anonymous>)
    at module.exports.toConfig (C:\Project\workmanager-frontend\node_modules\webpack-chain\src\Config.js:129:40)
    at Service.resolveWebpackConfig (C:\Project\workmanager-frontend\node_modules\@vue\cli-service\lib\Service.js:277:34)
    at PluginAPI.resolveWebpackConfig (C:\Project\workmanager-frontend\node_modules\@vue\cli-service\lib\PluginAPI.js:132:25)
    at serve (C:\Project\workmanager-frontend\node_modules\@vue\cli-service\lib\commands\serve.js:75:31)
    at Service.run (C:\Project\workmanager-frontend\node_modules\@vue\cli-service\lib\Service.js:262:12)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

我尝试过以下操作,但均无效:

  • 删除node_modules后重新执行npm i
  • 删除package-lock.json后重新安装依赖
  • 注释掉/node_modules/@vue/cli-service/lib/commands/serve.js中的这段代码:
if (!process.env.VUE_CLI_TEST && options.devServer.progress !== false) {
        //   // the default progress plugin won't show progress due to infrastructreLogging.level
        //   webpackConfig
        //     .plugin('progress')
        //     .use(require('progress-webpack-plugin'))
        // }

我可以选择降级Vue CLI,但在此之前想确认Vue2.7、Vue CLI5是否真的可以与Webpack5兼容,以下是我的package.json内容:

{
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.2.1",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^2.0.9",
    "@fullcalendar/core": "^5.11.4",
    "@fullcalendar/daygrid": "^5.11.3",
    "@fullcalendar/interaction": "^5.11.3",
    "@fullcalendar/list": "^5.11.3",
    "@fullcalendar/timegrid": "^5.11.3",
    "@fullcalendar/vue": "^5.11.4",
    "ag-grid-community": "^25.3.0",
    "ag-grid-vue": "^25.3.0",
    "axios": "^0.21.1",
    "billboard.js": "^2.2.6",
    "bootstrap": "^4.6.1",
    "bootstrap-vue": "^2.21.2",
    "chart.js": "^3.9.1",
    "chartkick": "^3.2.1",
    "core-js": "^3.8.3",
    "cors": "^2.8.5",
    "es-abstract": "^1.19.1",
    "floating-vue": "^1.0.0-beta.19",
    "hchs-vue-charts": "^1.2.8",
    "hooper": "^0.3.4",
    "i18next-scanner": "^4.1.1",
    "jquery": "^3.6.0",
    "jspdf": "^2.4.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "node-sass": "^6.0.1",
    "pdfjs-dist": "^2.10.377",
    "popper.js": "^1.16.1",
    "prismjs": "^1.27.0",
    "quasar": "^2.2.1",
    "tippy.js": "^6.3.7",
    "translate-google": "^1.5.0",
    "v-calendar": "^2.4.1",
    "v-jsoneditor": "^1.4.5",
    "vee-validate": "^2.2.15",
    "vue": "^2.7.14",
    "vue-advanced-cropper": "^1.8.2",
    "vue-chartjs": "^4.1.1",
    "vue-chartkick": "^0.6.1",
    "vue-codemirror": "^4.0.6",
    "vue-i18n": "^8.26.3",
    "vue-js-toggle-button": "^1.3.3",
    "vue-json-viewer": "^2.2.22",
    "vue-loading-overlay": "^3.4.2",
    "vue-prism-editor": "^1.3.0",
    "vue-property-decorator": "^8.5.1",
    "vue-resource": "^1.5.3",
    "vue-router": "^3.5.3",
    "vue-slide-up-down": "^2.0.1",
    "vue-spinner": "^1.0.4",
    "vue-sweetalert2": "^4.3.1",
    "vuedraggable": "^2.24.3",
    "vuejs-datepicker": "^1.6.2",
    "vuex": "^3.6.2",
    "xlsx": "^0.17.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@babel/plugin-transform-optional-chaining": "^7.22.6",
    "@storybook/addon-essentials": "^7.4.0",
    "@storybook/addon-interactions": "^7.4.0",
    "@storybook/addon-links": "^7.4.0",
    "@storybook/blocks": "^7.4.0",
    "@storybook/testing-library": "^0.2.0",
    "@storybook/vue": "^7.4.0",
    "@storybook/vue-webpack5": "^7.4.0",
    "@vue/cli-plugin-babel": "^5.0.6",
    "@vue/cli-plugin-eslint": "^5.0.6",
    "@vue/cli-service": "^5.0.6",
    "chromatic": "^6.24.1",
    "eslint": "^7.32.0",
    "eslint-plugin-storybook": "^0.6.13",
    "eslint-plugin-vue": "^9.17.0",
    "expose-loader": "^0.7.5",
    "html-loader": "^1.3.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass-loader": "^10.1.1",
    "storybook": "^7.4.0",
    "style-loader": "^2.0.0",
    "vue-loader": "^15.10.2"
  }
}

内容的提问来源于stack exchange,提问作者kkokki

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.11 12:35:57