vue项目启动报错(node版本与Webpack)

一、问题

因为项目需要将node版本从v14.17.0升级到v20.9.1了,然后启动项目报错

报错有些多,直接省略部分

building 2/2 modules 0 activeError: error:0308010C:digital envelope routines::unsupported

at new Hash (node:internal/crypto/hash:79:19)

at Object.createHash (node:crypto:139:10)

...

10% building 2/5 modules 3 active ...rains\IDEA\IdeaProjects\lz-safety\LZSafety-UI\node_modules@vue\cli-service\node_modules\webpack-dev-server\client\index.js?http://localhost:3200n

ode:internal/crypto/hash:79

this[kHandle] = new _Hash(algorithm, xofLen, algorithmId, getHashCache());

^

Error: error:0308010C:digital envelope routines::unsupported

at new Hash (node:internal/crypto/hash:79:19)

at Object.createHash (node:crypto:139:10)

...

opensslErrorStack: [

'error:03000086:digital envelope routines::initialization error',

'error:0308010C:digital envelope routines::unsupported'

],

library: 'digital envelope routines',

reason: 'unsupported',

code: 'ERR_OSSL_EVP_UNSUPPORTED'

}

Node.js v20.19.1

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
原因大致就是 Node.js 版本升级后,OpenSSL 安全策略加强导致的。

通俗点说就是 Webpack 4 默认使用 MD5 哈希算法,但 Node.js 17+ 版本默认禁用了弱哈希算法(如 MD5、SHA-1)

项目可能使用了较旧的 WebpackVue CLI 版本(如 Webpack 4),与新的 Node.js 版本不兼容

二、解决

1、修改启动脚本。

2、升级Webpack 和相关依赖。

3、将Node.js 版本降级。

单纯启动个项目,所以采用方案一

找到项目的package.json文件,修改serve选项(控制项目启动),build(打包项目的)

修改前 修改后

修改为以下代码

bash 复制代码
    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",

启动项目,直接运行成功了

相关推荐
ZC跨境爬虫4 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
前端老石人4 小时前
HTML 字符引用完全指南
开发语言·前端·html
幼儿园技术家5 小时前
前端如何设计权限系统(RBAC / ABAC)?
前端
前端摸鱼匠6 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript
REDcker7 小时前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
donecoding8 小时前
一个 sudo 引发的血案:npm 全局包权限错乱彻底修复
前端·node.js·前端工程化
风骏时光牛马8 小时前
Raku正则匹配与数据批量处理实操案例
前端
nbwenren8 小时前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码
前端·css·html
Lee川8 小时前
Prisma 实战指南:像搭积木一样设计古诗词数据库
前端·数据库·后端