npm启动前端项目时报错(vue) error:0308010C:digital envelope routines::unsupported

 vue 启动项目时,npm run serve 报下面的错:

error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:133:10)

 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'
}

D:\OpenSource\bpm-platform-ui-250115>npm run dev

> work-flowable@0.8.3 dev
> vue-cli-service serve

 INFO  Starting development server...
95% emitting CompressionPlugin ERROR  Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at D:\OpenSource\bpm-platform-ui-250115\node_modules\compression-webpack-plugin\dist\index.js:243:42
    at CompressionPlugin.compress (D:\OpenSource\bpm-platform-ui-250115\node_modules\compression-webpack-plugin\dist\index.js:284:9)
    at D:\OpenSource\bpm-platform-ui-250115\node_modules\compression-webpack-plugin\dist\index.js:305:12
    at _next1 (eval at create (D:\OpenSource\bpm-platform-ui-250115\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:14:17)
    at eval (eval at create (D:\OpenSource\bpm-platform-ui-250115\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:33:1)
    at D:\OpenSource\bpm-platform-ui-250115\node_modules\copy-webpack-plugin\dist\index.js:91:9
 

解决方法: 

在窗口运行如下代码(修改环境变量),回车后重启即可~~~~

$env:NODE_OPTIONS="--openssl-legacy-provider"

前端项目使用( npm run dev ) 运行vue项目时,出现错误:Error: error:0308010C:digital envelope routines::unsupported

经过探索,发现问题所在,主要是nodeJs V17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制,导致了nodeJs V17之前版本不受影刺而nodeJs V17和之后的版本会出现这个错误。

也就是npm升级导致了与OpenSSL不兼容导致的初始化失败,也就是nodeJs版本过高的原因导致了运行失败。

系统安装的nodeJs版本正好是V18,因此出现了这个错误系统。
解决方案

1、更改系统环境变量来解决

2、更改项目环境变量来解决

3、更换NodeJs版本来解决
具体演示

1、更改系统环境变量

①Windows平台

我的电脑上右键 → 属性 → 高级系统设置 → 添加系统变量:NODE_OPTIONS = --openssl-legacy-provider

 

 

②Linux / Mac 平台

export NODE_OPTIONS=--openssl-legacy-provider

完成后,建议重新打开一个命令行窗口启动服务。

2、更改项目环境变量来解决

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

添加前代码:

      "scripts": {
        "dev": "vue-cli-service serve",
        "build:prod": "vue-cli-service build",
        "build:stage": "vue-cli-service build --mode staging",
        "preview": "node build/index.js --preview",
        "lint": "eslint --ext .js,.vue src",
        "test:unit": "jest --clearCache && vue-cli-service test:unit",
        "test:ci": "npm run lint && npm run test:unit",
        "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
      },

添加后代码:

      "scripts": {
        "dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
        "build:prod": "vue-cli-service build",
        "build:stage": "vue-cli-service build --mode staging",
        "preview": "node build/index.js --preview",
        "lint": "eslint --ext .js,.vue src",
        "test:unit": "jest --clearCache && vue-cli-service test:unit",
        "test:ci": "npm run lint && npm run test:unit",
        "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
      },

这里需要注意的是,要是团队中的nodejs版本不一致,不要提交该 package.json 文件。

②与①类似,在编辑器集成终端里,直接设置环境变量进行控制(这种方式只能临时解决)

具体如下:

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

    // windows系统
    set NODE_OPTIONS=--openssl-legacy-provider
     
    // linux系统
    export NODE_OPTIONS=--openssl-legacy-provider

3、更换NodeJs版本来解决

卸载本地NodeJs环境,暗转NodeJsV17之前的版本。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/67192.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

改进候鸟优化算法之三:引入自适应策略的候鸟优化算法(AS-MBO)

引入自适应策略的候鸟优化算法(Migrating Birds Optimization with Adaptive Strategy,简称AS-MBO)是对传统候鸟优化算法(Migrating Birds Optimization,MBO)的一种改进。MBO算法本身是一种基于群体智能的元启发式优化算法,其灵感来源于候鸟迁徙时的“V”字形飞行队列,…

02-机器学习-核心概念

以下是机器学习核心概念的详细梳理。 1. 机器学习三大范式 类型定义典型应用监督学习使用带标签的数据训练模型&#xff0c;预测未知数据的标签。分类&#xff08;邮件垃圾过滤&#xff09;、回归&#xff08;房价预测&#xff09;无监督学习从无标签的数据中发现隐藏模式或结…

Redis实战(黑马点评)——关于缓存(缓存更新策略、缓存穿透、缓存雪崩、缓存击穿、Redis工具)

redis实现查询缓存的业务逻辑 service层实现 Overridepublic Result queryById(Long id) {String key CACHE_SHOP_KEY id;// 现查询redis内有没有数据String shopJson (String) redisTemplate.opsForValue().get(key);if(StrUtil.isNotBlank(shopJson)){ // 如果redis的数…

算法-加油站问题

hello 大家好&#xff01;今天开写一个新章节&#xff0c;每一天一道算法题。让我们一起来学习算法思维吧&#xff01; function canCompleteCircuit(gas, cost) {// 加油站的总数const n gas.length;// 记录总剩余油量&#xff0c;若总剩余油量小于 0&#xff0c;说明无法绕环…

讯飞绘镜(ai生成视频)技术浅析(二):大模型

1.讯飞星火大模型的基础架构 2.自然语言处理(NLP)技术的具体实现 3.脚本生成的具体过程与模型公式 4.分镜生成的具体过程与模型公式 5.视频生成与编辑的技术细节 6.关键技术公式的详细推导与解释 一、讯飞星火大模型的基础架构 讯飞星火大模型是基于Transformer架构的深…

【机器学习】深入探索SVM:支持向量机的原理与应用

目录 &#x1f354; SVM引入 1.1什么是SVM? 1.2支持向量机分类 1.3 线性可分、线性和非线性的区分 &#x1f354; 小结 学习目标 知道SVM的概念 &#x1f354; SVM引入 1.1什么是SVM? 看一个故事&#xff0c;故事是这样子的&#xff1a; 在很久以前的情人节&#xf…

pycharm 运行远程环境问题 Error:Failed to prepare environment.

问题排查 拿到更详细的报错信息&#xff1a; Help > Diagnostic Tools > Debug Log Settings section: 添加下面的配置 com.intellij.execution.configurations.GeneralCommandLine 重显报错&#xff0c;我这里是再次运行代码打开 Help | Collect Logs and Diagnosti…

一组开源、免费、Metro风格的 WPF UI 控件库

前言 今天大姚给大家分享一个开源、免费、Metro风格的 WPF UI 控件库&#xff1a;MahApps.Metro。 项目介绍 MahApps.Metro 是一个开源、免费、Metro风格的 WPF UI 控件库&#xff0c;提供了现代化、平滑和美观的控件和样式&#xff0c;帮助开发人员轻松创建具有现代感的 Win…

读写和解析简单的 nc 文件

NetCDF 文件格式在气象数据工程领域占据着举足轻重的地位&#xff0c;其结构灵活、强兼容性等优势使其成为该领域的一个标准。无论是从事学术研究还是工程实践&#xff0c;掌握这种数据格式变得越发重要。其次&#xff0c;我注意到目前社区中气象编程大多数课程都聚焦于某个特定…

Mac m1,m2,m3芯片使用nvm安装node14报错

使用nvm安装了node 12/16/18都没有问题&#xff0c;到14就报错了。第一次看到这个报错有点懵&#xff0c;查询资料发现是Mac芯片的问题。 Issue上提供了两个方案&#xff1a; 1、为了在arm64的Mac上安装node 14&#xff0c;需要使用Rosseta&#xff0c;可以通过以下命令安装 …

【计算机网络】host文件

host文件的主要功能&#xff1a; 域名解析 本地映射&#xff1a;host文件的主要功能是将**域名映射到相应的 IP 地址**。当计算机需要访问一个网站或服务时&#xff0c;它会首先在 host文件中查找该域名对应的 IP 地址。如果在 host文件中找到了匹配的域名和 IP 地址映射&…

vue3中customRef的用法以及使用场景

1. 基本概念 customRef 是 Vue3 提供的用于创建自定义响应式引用的 API&#xff0c;允许显式地控制依赖追踪和触发响应。它返回一个带有 get 和 set 函数的工厂函数来自定义 ref 的行为。 1.1 基本语法 import { customRef } from vuefunction createCustomRef(value) {retu…

周末总结(2024/01/25)

工作 人际关系核心实践&#xff1a; 要学会随时回应别人的善意&#xff0c;执行时间控制在5分钟以内 坚持每天早会打招呼 遇到接不住的话题时拉低自己&#xff0c;抬高别人(无阴阳气息) 朋友圈点赞控制在5min以内&#xff0c;职场社交不要放在5min以外 职场的人际关系在面对利…

C++和Python实现SQL Server数据库导出数据到S3并导入Redshift数据仓库

用C实现高性能数据处理&#xff0c;Python实现操作Redshift导入数据文件。 在Visual Studio 2022中用C和ODBC API导出SQL Server数据库中张表中的所有表的数据为CSV文件格式的数据流&#xff0c;用逗号作为分隔符&#xff0c;用双引号包裹每个数据&#xff0c;字符串类型的数据…

基于OpenCV实现的答题卡自动判卷系统

一、图像预处理 🌄 二、查找答题卡轮廓 📏 三、透视变换 🔄 四、判卷与评分 🎯 五、主函数 六、完整代码+测试图像集 总结 🌟 在这篇博客中,我将分享如何使用Python结合OpenCV库开发一个答题卡自动判卷系统。这个系统能够自动从扫描的答题卡中提取信…

Android AOP:aspectjx

加入引用 在整个项目的 build.gradle 中&#xff0c;添加 classpath "com.hujiang.aspectjx:gradle-android-plugin-aspectjx:2.0.10" 可以看到测试demo的 gradle 版本是很低的。 基于 github 上的文档&#xff0c;可以看到原版只支持到 gradle 4.4 。后续需要使…

第84期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…

TCP/IP 协议:互联网通信的基石

TCP/IP 协议:互联网通信的基石 引言 TCP/IP协议,全称为传输控制协议/互联网协议,是互联网上应用最为广泛的通信协议。它定义了数据如何在网络上传输,是构建现代互联网的基础。本文将深入探讨TCP/IP协议的原理、结构、应用以及其在互联网通信中的重要性。 TCP/IP 协议概述…

蛇年特别版贪吃蛇H5小游戏

该作者的原创文章目录: 生产制造执行MES系统的需求设计和实现 企业后勤管理系统的需求设计和实现 行政办公管理系统的需求设计和实现 人力资源管理HR系统的需求设计和实现 企业财务管理系统的需求设计和实现 董事会办公管理系统的需求设计和实现 公司组织架构图设计工具 库存管…

MapReduce,Yarn,Spark理解与执行流程

MapReduce的API理解 Mapper 如果是单词计数&#xff1a;hello&#xff1a;1&#xff0c; hello&#xff1a;1&#xff0c; world&#xff1a;1 public void map(Object key, // 首字符偏移量Text value, // 文件的一行内容Context context) // Mapper端的上下文&#xff0c;…