VUE 项目打包问题

最新推荐文章于 2024-08-22 16:08:00 发布

ZFLLLLLLLLLLLLLLLL

最新推荐文章于 2024-08-22 16:08:00 发布

阅读量1k

点赞数 31

文章标签： webpack javascript 前端 node.js

本文链接：https://blog.csdn.net/m0_61943036/article/details/130595592

版权

当Node.js升级到17+版本后，由于crypto模块对摘要算法的限制，可能导致Vue项目的webpack构建失败。解决方法包括升级webpack到支持的新版本，提供legacy容器环境，或使用nvm等版本管理工具切换或降级Node.js版本。

摘要由CSDN通过智能技术生成

最近，发现自己电脑上的nodejs版本居然还是14+，而最新的已经到了18+，由于并没有使用任何版本管理工具，于是直接升级到了最新的版本(v18.14.1)，然后悲剧就发生了。
电脑里以往的绝大部分的Vue和React项目，在执行脚本构建命令如 npm run dev 或 npm run build 时，都出现同样的错误，导致构建失败，并且报类似下面的错误：

查找原因

出现了问题，自然要想办法解决。
在网上搜索了一圈，发现该问题早已出现，一般描述的大致原因就是：当 nodejs 升级到17+版本以后，开始支持 OpenSSL 3.0，而 OpenSSL 3.0 对各种摘要算法做了更严格的限制，可能会导致一些程序运行错误。

webpack源码与配置

但其实，并不是所有的项目都会出现，比如使用了最新版本的 webpack 工具的项目就能够正常运行，所以得搞清楚其中的具体原因，到底是哪些地方影响了项目运行。
而要搞清原因，还得回到错误信息里，仔细查看上图里的错误信息，可以发现：Error 出现在了 webpack 包的 lib/util/createHash.js 代码文件，查看该文件，可知主要是用于创建hash值，这部分的核心代码如下所示：

switch (algorithm) {
  case 'debug':
    return new DebugHash()
  default:
    return new BulkUpdateDecorator(require('crypto').createHash(algorithm))
}
复制代码

从上面的代码，我们可以发现：webpack 的 hash 使用了 nodejs 中的 crypto 加密模块，根据传入的算法名称创建 Hash 对象。

我们直接代码测试，进一步发现当前版本的 webpack，这里的参数 algorithm 算法都是使用的 md4，搜索 webpack 源码还能发现很多地方直接写死了 md4 算法名：