首页 前端知识 Vue-解决BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

Vue-解决BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

2024-05-13 10:05:39 前端知识 前端哥 562 760 我要收藏

报错显示

跑个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()],
  },
};

操作步骤总结

上述操作中

  1. 使用了 node-polyfill-webpack-plugin 插件来解决在 Webpack 5 中缺少 Node.js 核心模块的问题。
  2. 同时,我们通过修改 resolve.fallback 配置来添加了 fscrypto 和 stream 模块的 polyfill。
  3. 其次需要确保已经安装了 node-polyfill-webpack-plugin 和 crypto-browserify 依赖。

这样修改后,重新运行打包命令,你的代码应该可以正常编译和执行!

希望有帮助到你(oi)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8537.html
标签
webpack
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!