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",

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

相关推荐
定栓几秒前
vue3入门-v-model、ref和reactive讲解
前端·javascript·vue.js
专注API从业者5 分钟前
基于 Flink 的淘宝实时数据管道设计:商品详情流式处理与异构存储
大数据·前端·数据库·数据挖掘·flink
龙在天6 分钟前
H5开发,开发照相机,以及组件封装
前端
曼妥思12 分钟前
PosterKit:跨框架海报生成工具
前端·开源
binqian32 分钟前
【异步】js中异步的实现方式 async await /Promise / Generator
开发语言·前端·javascript
Jerry说前后端41 分钟前
Android 移动端 UI 设计:前端常用设计原则总结
android·前端·ui
熊猫钓鱼1 小时前
基于Trae CN与TrendsHub快速实现的热点百事通
前端·trae
LIUENG1 小时前
Vue3 响应式原理
前端·vue.js
讨厌吃蛋黄酥1 小时前
前端居中九种方式血泪史:面试官最爱问的送命题,我一次性整明白!
前端·css
龙在天1 小时前
🤩 用Babel自动埋点,原来这么简单!
前端