Vue2项目配置vue-styleguidist出现webpack API schema不匹配报错
报错根因
该错误由webpack版本不兼容导致的配置校验失败触发:
webpack 5 对node配置项的规则做了大幅精简,仅支持配置__dirname、__filename、global三个属性。当前使用的vue-styleguidist版本生成的webpack配置沿用了webpack 4的规则,额外添加了setImmediate、process、fs等已被移除的node配置字段,因此触发了schema校验错误。
可行解决方法
- 方案1:修改styleguide配置适配webpack 5
在/docs目录下找到或新建styleguide.config.js,添加如下配置覆写webpack规则:
module.exports = { // 保留你原有的其他vue-styleguidist配置项 webpackConfig: { node: { __dirname: true, __filename: true, global: true }, resolve: { fallback: { // 原node配置里的polyfill规则移到此处配置 "process": require.resolve("process/browser"), "setImmediate": require.resolve("setimmediate"), "dgram": false, "fs": false, "net": false, "tls": false, "child_process": false } } } }
配置完成后安装缺少的polyfill依赖:npm install process setimmediate -D
方案2:降级vue-styleguidist适配webpack 4
如果项目整体使用webpack 4,可以直接安装适配webpack 4的vue-styleguidist 4.x版本:npm install vue-styleguidist@4 -D方案3:解决同目录依赖冲突
由于在/docs目录下同时安装了vuepress和vue-styleguidist,两个工具可能依赖不同版本的webpack,可删除/docs目录下的node_modules文件夹和package-lock.json/yarn.lock文件后重新执行npm install安装依赖,排除版本冲突问题。
内容的提问来源于stack exchange,提问作者Nijinsky
相关产品推荐
相关产品推荐

