Vue项目编译报错：ValidationError: Progress Plugin Invalid Options排查

这个ValidationError: Progress Plugin Invalid Options本质是你给Webpack的ProgressPlugin传的配置不符合它的校验规则，对应你遇到的报错信息，具体成因分这几种：

• 额外属性触发报错：你在ProgressPlugin的配置对象里添加了插件官方未定义的属性。比如插件仅支持activeModules、entries、handler等属性，你硬加了自定义的showDetail这类字段，就会触发"options不应存在额外属性"的提示。

• instanceof校验失败：插件要求某个配置项必须是特定类的实例，你传入了其他类型的值。比如filter选项要求是RegExp实例，你传了字符串"/\.vue/"而非正则表达式/\.vue/；或者handler要求是函数，你传了字符串，都会触发这类错误。

• 不满足oneOf schema规则：ProgressPlugin的配置支持几种不同的格式（比如要么传预设字符串，要么传完整配置对象，部分属性互斥），你混用了不符合任一格式的组合。比如插件允许你要么传profile: true搭配特定属性，要么传percentBy: "modules"，但你同时把两种模式的属性都配置了，就会触发"需匹配oneOf中的任一schema"的报错。

另外，依赖版本不兼容也是常见诱因：比如项目中Webpack主版本与progress-plugin版本不匹配（比如Webpack 5沿用了Webpack 4时期的ProgressPlugin配置，或者安装的第三方插件间接修改了ProgressPlugin的配置），导致配置格式与当前插件版本的校验规则不匹配。比如你提供的package.json里，如果webpack和@vue/cli-service版本差距较大，或者单独安装了特定版本的progress-plugin，很可能出现这类校验不通过的问题。

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