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

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

相关推荐
一勺菠萝丶6 分钟前
管理后台使用手册在线预览与首次登录引导弹窗实现
java·前端·数据库
军军君016 分钟前
Three.js基础功能学习十四:智能黑板实现实例一
前端·javascript·css·typescript·前端框架·threejs·智能黑板
小村儿8 分钟前
连载05-Claude Skill 不是抄模板:真正管用的 Skill,都是从实战里提炼出来的
前端·后端·ai编程
xiaotao13115 分钟前
JS new 操作符完整执行过程
开发语言·前端·javascript·原型模式
robch21 分钟前
python3 -m http.server 8001直接启动web服务类似 nginx
前端·nginx·http
吴声子夜歌27 分钟前
ES6——数组的扩展详解
前端·javascript·es6
guhy fighting36 分钟前
new Map,Array.from,Object.entries的作用以及使用方法
开发语言·前端·javascript
大漠_w3cpluscom36 分钟前
CSS 技巧:CSS 单位使用指南
前端
STATICHIT静砸1 小时前
了解Monorepo结构
前端