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
相关产品推荐
相关产品推荐

