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

报错显示

跑个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 配置来添加了 fs、crypto 和 stream 模块的 polyfill。
3. 其次需要确保已经安装了 node-polyfill-webpack-plugin 和 crypto-browserify 依赖。

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

希望有帮助到你（oi）