报错显示
跑个vue的项目,突然出现以下报错
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "console": require.resolve("console-browserify") }'
- install 'console-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "console": false }
@ ./src/components/HelloWorld.vue?vue&type=script&lang=js 1:0-202 1:0-202 1:203-394 1:203-394
@ ./src/components/HelloWorld.vue 2:0-61 3:0-56 3:0-56 6:49-55
@ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js 1:0-53 5:4-14
@ ./src/App.vue?vue&type=script&lang=js 1:0-189 1:0-189 1:190-368 1:190-368 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 8:49-55
@ ./src/main.js 2:0-28 4:10-13
webpack compiled with 1 error
仔细阅读报错并查找相关资料才发现,原来是webpack5中移除了nodejs核心模块的polyfill自动引入,所以需要手动引入
OK,知道了问题所在,那就开始解决问题!
解决方案
环境依赖的安装
首先我们先安装一下node-polyfill-webpack-plugin
,这是一个 Webpack 插件,用于在浏览器环境下模拟 Node.js 核心模块的功能。
在终端执行以下命令即可,安装速度与主机的网速相关
npm install node-polyfill-webpack-plugin
其次再安装一下crypto-browserify
,这是一个兼容浏览器环境的 Node.js crypto
模块的 polyfill 库,它提供了与 Node.js 的 crypto
模块相似的功能,使你可以在浏览器环境中使用加密和哈希算法等功能。
同样在终端执行以下命令
npm install crypto-browserify
配置文件代码的修改
在你的vue.config.js文件中修改一下配置代码(直接替换即可)
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
configureWebpack: {
resolve: {
fallback: {
fs: false,
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
},
},
plugins: [new NodePolyfillPlugin()],
},
};
操作步骤总结
上述操作中
- 使用了
node-polyfill-webpack-plugin
插件来解决在 Webpack 5 中缺少 Node.js 核心模块的问题。 - 同时,我们通过修改
resolve.fallback
配置来添加了fs
、crypto
和stream
模块的 polyfill。 - 其次需要确保已经安装了
node-polyfill-webpack-plugin
和crypto-browserify
依赖。
这样修改后,重新运行打包命令,你的代码应该可以正常编译和执行!
希望有帮助到你(oi)