vuecli3.x打包提示configuration.plugins[12] misses the property 'apply'

Vue CLI 3.x 打包报错解析
本文记录了在使用 Vue CLI 3.x 进行项目打包时遇到的错误:Invalid configuration object...,并详细描述了解决过程,最终发现是 webpack 插件配置缺少 'apply' 属性导致的问题。

记录vuecli3.x打包时遇到的迷之问题

创建了一个自主测试插件的项目,准备打包放到服务上的时候,用着脚手架打包的万能指令

npm run build

运行后,发现报错

 Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
configuration.plugins[12] misses the property 'apply'

一开始以为是webpack的版本问题,后续在版本操作的时候发现,更换版本后,问题没有解决又出现新的问题,其余的配置都有问题,这个时候脑壳有点昏,冷静了一下,详细的回退看了一下报错信息configuration.plugins[12] misses the property 'apply'(插件配置没有应用属性),因为该项目案例中,做了许多打包压缩,删除map,配置cdn等东西,所以安装了一些webpack插件,所以就在想是不是插件的问题,然后我将webpack中configureWebpack配置项的内容全部注释,

重新执行打包指令,Ok,打包成功。

 

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration[0].plugins[7] misses the property &#39;apply&#39;. Should be: function -> The run point of the plugin, required method. ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration[0].plugins[7] misses the property &#39;apply&#39;. Should be: function -> The run point of the plugin, required method. at validate (G:\git-lightnode\lightnode-control-ecs\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:46383:11) at validateSchema (G:\git-lightnode\lightnode-control-ecs\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:188244:2) at create (G:\git-lightnode\lightnode-control-ecs\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:191683:24) at Object.webpack (G:\git-lightnode\lightnode-control-ecs\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:191725:32) at Bundler.setupDevServerOpts (G:\git-lightnode\lightnode-control-ecs\node_modules\@umijs\bundler-webpack\lib\index.js:202:40) at G:\git-lightnode\lightnode-control-ecs\node_modules\@umijs\preset-built-in\lib\plugins\commands\dev\dev.js:286:30 at Generator.next (<anonymous>) at asyncGeneratorStep (G:\git-lightnode\lightnode-control-ecs\node_modules\@umijs\preset-built-in\lib\plugins\commands\dev\dev.js:74:103) at _next (G:\git-lightnode\lightnode-control-ecs\node_modules\@umijs\preset-built-in\lib\plugins\commands\dev\dev.js:76:194) info 如果你需要进交流群,请访问 https://fb.umijs.org Done in 15.48s.
最新发布
07-11
在使用 UmiJS 和 Webpack 5 配置 Sentry 时,出现 `Invalid configuration object` 错误并提示某个插件缺少 `&#39;apply&#39;` 方法,通常是由于直接修改了 Webpack 的配置对象而导致的。UmiJS 对 Webpack 配置进行了封装,并不支持直接通过 `.plugins.push()` 的方式添加插件,这种操作会导致插件未正确注册而引发错误。 为避免此类问题,应使用 `chainWebpack` 方法来安全地注入 Webpack 插件。UmiJS 提供了链式 API 来修改 Webpack 配置,确保新增插件符合校验规则并具备正确的结构 [^1]。 以下是一个适用于 UmiJS + Webpack 5 的 Sentry 插件配置示例: ```ts import * as SentryWebpackPlugin from &#39;@sentry/webpack-plugin&#39;; export default { chainWebpack(config) { const release = process.env.RELEASE_VERSION || require(&#39;./package.json&#39;).version; config.plugin(&#39;sentry&#39;) .use(SentryWebpackPlugin, [{ include: &#39;./dist&#39;, ignore: [&#39;node_modules&#39;], configFile: &#39;./.sentryclirc&#39;, release, deleteAfterCompile: true, urlPrefix: &#39;~/static/&#39;, }]); }, }; ``` 此配置通过 `config.plugin().use()` 方法将 `SentryWebpackPlugin` 注入到 Webpack 构建流程中,而不是直接操作 `plugins` 数组,从而避免了 `Invalid configuration object` 错误的发生 [^2]。 此外,需要确保 `.sentryclirc` 或 `sentry.properties` 文件中包含正确的认证信息和项目配置,例如: ``` auth.token=your_sentry_api_token org=your_organization_slug project=your_project_slug ``` 若使用的是 ESM(ECMAScript Module)项目结构,需注意 `@sentry/webpack-plugin` 是否支持默认导出或命名导出,并相应调整导入语句格式,例如: ```ts import SentryWebpackPlugin from &#39;@sentry/webpack-plugin&#39;; // 或 import * as SentryWebpackPlugin from &#39;@sentry/webpack-plugin&#39;; ``` 最后,确保 Webpack 开启了 Source Map 生成功能,通常可通过设置 `devtool: &#39;source-map&#39;` 来实现,以保证 Sentry 能够正确上传并关联源码映射文件 [^3]。 ---
评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杀猪刀-墨林

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值