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

目录

[项目运行npm run serve报错:](#项目运行npm run serve报错:)

原因分析

解决方案:

[1. 临时解决方案:添加环境变量兼容旧算法](#1. 临时解决方案:添加环境变量兼容旧算法)

[2. 长期解决方案:升级依赖到兼容版本](#2. 长期解决方案:升级依赖到兼容版本)

[3. 降级 Node.js 版本](#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-loadercss-loader 等相关依赖(需注意版本兼容性)。

3. 降级 Node.js 版本

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

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

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

运行成功:

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

相关推荐
李鸿耀2 小时前
Flex 布局下文字省略不生效?原因其实很简单
前端
皮蛋瘦肉粥_1213 小时前
pink老师html5+css3day06
前端·css3·html5
华仔啊7 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel7 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴7 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel7 小时前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫7 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin8 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学9 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室11 小时前
CSS高效开发三大方向
前端·css