报错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的使用我就不多说了,哈哈,给你上面的一个图,自己看了。

运行成功:

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

相关推荐
加班是不可能的,除非双倍日工资3 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi3 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip4 小时前
vite和webpack打包结构控制
前端·javascript
excel4 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
阿华的代码王国5 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼5 小时前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin
Jimmy5 小时前
AI 代理是什么,其有助于我们实现更智能编程
前端·后端·ai编程
草梅友仁5 小时前
草梅 Auth 1.4.0 发布与 ESLint v9 更新 | 2025 年第 33 周草梅周报
vue.js·github·nuxt.js
ZXT5 小时前
promise & async await总结
前端
Jerry说前后端5 小时前
RecyclerView 性能优化:从原理到实践的深度优化方案
android·前端·性能优化