报错error:0308010C:digital envelope routines::unsupported解决方案

目录

项目运行npm run serve报错：

原因分析

解决方案：

1. 临时解决方案：添加环境变量兼容旧算法

2. 长期解决方案：升级依赖到兼容版本

3. 降级 Node.js 版本

项目运行npm run serve报错：

（以前能运行的，现在又不行了）

 这个错误 (error:0308010C:digital envelope routines::unsupported) 是由于 Node.js 版本与项目依赖的加密算法不兼容 导致的，常见于使用较新 Node.js（v17+）运行旧版 Webpack。

原因分析

Node.js v17+ 升级了内置的 OpenSSL 到 3.0 版本，废弃了一些旧的加密算法（如 MD4），而旧版 Webpack（4.x）及部分依赖仍在使用这些被废弃的算法，导致运行时报错。

解决方案：

1. 临时解决方案：添加环境变量兼容旧算法

在启动命令中添加 NODE_OPTIONS=--openssl-legacy-provider，强制 Node.js 使用旧版加密算法兼容模式。
修改 package.json 中的 serve 命令，根据操作系统添加环境变量：

// package.json
"scripts": {
  // Windows 系统（CMD/PowerShell）
  "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
  // macOS/Linux 系统（bash/zsh）
  // "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve"
}

再次执行 npm run serve，此时会以兼容模式启动，错误通常会消失。

2. 长期解决方案：升级依赖到兼容版本

如果项目允许，升级依赖以支持新版 Node.js（推荐）：

• 升级 Vue CLI 到 5.x（默认使用 Webpack 5，已兼容 OpenSSL 3.0）：

  npm install -g @vue/cli@latest  # 全局升级 Vue CLI
  vue upgrade  # 升级项目依赖（按提示操作）
  

• 手动升级 Webpack 及相关依赖（如果不升级 Vue CLI）：
  Webpack 5 已修复此问题，可升级项目中的 Webpack 到 5.x，并同步升级 vue-loader、css-loader 等相关依赖（需注意版本兼容性）。

3. 降级 Node.js 版本

（我一般用的这个方法，版本控制即可，防止一些其他包的问题）

如果暂时无法升级依赖，可将 Node.js 降级到 v16.x 及以下版本（LTS 版本如 v16.20.2），这些版本使用 OpenSSL 1.1.x，不会触发此错误。

• 下载地址：Node.js 历史版本
• 推荐使用 nvm（Node 版本管理器）快速切换版本。

nvm的使用我就不多说了，哈哈,给你上面的一个图，自己看了。

运行成功：

-----------完 ------------