npm run serve运行vue项目时报错:Error: error:0308010C:digital envelope routines::unsupported的解决方法

 更新时间:2024年04月10日 09:47:45   作者:儒雅的烤地瓜  
这篇文章主要介绍了npm run serve运行vue项目时,出现报错:Error: error:0308010C:digital envelope routines::unsupported的解决方法,文中有详细的解决方法,需要的朋友可以参考下

问题描述

用npm run serve运行vue项目时,出现报错:Error: error:0308010C:digital envelope routines::unsupported

报错信息

前端项目启动(npm run dev)和打包时(npm run build:prod)报出如下错误,

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports 
....
 
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

问题原因:

经过一番探索,终于找到了症结所在:主要是nodeJs V17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制,nodeJs v17之前版本没影响,但V17和之后版本会出现这个错误。

一句话总结,说白了就是npm升级导致与 openssl 不兼容导致的初始化失败,也就是node.js版本过高的原因造成的运行失败。

解决办法(仅windows):

方式一:通过更改环境变量,进行控制

1、在package.json的scripts中新增SET NODE_OPTIONS=--openssl-legacy-provider

添加前:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

添加后

 "scripts": {
    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

注意:如果团队中node版本不一致,不要将该package.json提交。

2、与第一种方法类似,在编辑器集成终端里,直接设置环境变量,进行控制(只能临时解决)

找到package.json文件右键,在集成终端中打开后,直接输入set NODE_OPTIONS=--openssl-legacy-provider 或 $env:NODE_OPTIONS="--openssl-legacy-provider"回车,然后npm run serve重新运行项目即可。

// windows下
set NODE_OPTIONS=--openssl-legacy-provider
// linux下
export NODE_OPTIONS=--openssl-legacy-provider

方式二:更换node.js版本

以上就是npm run serve运行vue项目时,出现报错:Error: error:0308010C:digital envelope routines::unsupported的解决方法的详细内容,更多关于npm run serve运行vue项目报错的资料请关注脚本之家其它相关文章!

相关文章

  • vue实现菜单切换功能

    vue实现菜单切换功能

    这篇文章主要介绍了vue实现菜单切换功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue新建环境变量以及网络请求工具axios的二次封装详解

    vue新建环境变量以及网络请求工具axios的二次封装详解

    这篇文章主要为大家介绍了vue新建环境变量以及网络请求工具axios的二次封装详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue如何通过点击事件弹出弹窗页面详解

    vue如何通过点击事件弹出弹窗页面详解

    弹窗是我们开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了关于vue如何通过点击事件弹出弹窗页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 页面内锚点定位及跳转方法总结(推荐)

    页面内锚点定位及跳转方法总结(推荐)

    这篇文章主要介绍了页面内锚点定位及跳转方法总结,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue组件中修改组件外元素样式的两种解决方案

    vue组件中修改组件外元素样式的两种解决方案

    这篇文章主要介绍了vue组件中修改组件外元素样式,本文给大家分享两种解决方案帮助大家解决这样的问题,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue类名如何获取动态生成的元素

    vue类名如何获取动态生成的元素

    这篇文章主要介绍了vue类名如何获取动态生成的元素,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • element-ui中如何给el-table的某一行或某一列加样式

    element-ui中如何给el-table的某一行或某一列加样式

    本文主要介绍了element-ui中怎么给el-table的某一行或某一列加样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 如何区分vue中的v-show 与 v-if

    如何区分vue中的v-show 与 v-if

    这篇文章主要介绍了如何区分vue中的v-show 与 v-if ,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-09-09
  • vue中如何实现pdf文件预览的方法

    vue中如何实现pdf文件预览的方法

    这篇文章主要介绍了vue中如何实现pdf文件预览的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 使用Vue封装一个自定义的右键菜单组件

    使用Vue封装一个自定义的右键菜单组件

    通过自定义右键菜单栏,用户可以根据自己的需求添加、调整和删除菜单选项,所以本文就来为大家介绍一下如何使用使用Vue封装一个自定义的右键菜单组件吧
    2024-01-01

最新评论