Vue 报错 error:0308010C:digital envelope routines::unsupported

简介: Vue 报错 error:0308010C:digital envelope routines::unsupported

症状

Vue 报错error:0308010C:digital envelope routines::unsupported

原因

出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响.

解决方法

方法1

打开终端(按健win+R弹出窗口,键盘输入cmd,然后敲回车)并按照说明粘贴这些:(不一定行,本人失败了)

Linux & Mac OS (windows git bash)

export NODE_OPTIONS=--openssl-legacy-provider

windows命令提示符:

set NODE_OPTIONS=--openssl-legacy-provider

方法2

尝试卸载Node.js 17+版本并重新安装Node.js 16+版本,然后再重新启动

1、安装nvm管理工具(先关掉360等软件,不然会弹出警告!)
2、从官网下载安装包 ,下载:nvm-setup.exe
3、开始进行nvm安装:

(1) 鼠标双击nvm-setup.exe文件,选择“我接受…”那一行,点击next

(2) 可以根据自身情况自定义选择路径盘,路径不要出现空格或中文符号(路径最好是在路径盘的根目录下,如C盘、D盘下的根目录),选好后点击next

(3) 选择node.js的安装位置,可以根据自身情况自定义选择路径盘,路径不要出现空格或中文符号(路径最好是在路径盘的根目录下新建一个文件夹,如C盘、D盘下的根目录),选好后点击next。(若系统中已经安装node.js,则cmd打开终端,输入where node,查看node的位置,选择此文件目录)

(4) 最后一步,点击 install 即可安装完成。

4、验证是否安装成功

进入命令控制行窗口(win+R,输入cmd),

输入nvm -v,出现版本号即成功。

5、安装node.js

(1) 输入命令行nvm ls available查看可用的node.js版本号

若报错:Could not retrieve https://nodejs.org/dist/latest/.....

则打开nvm的安装目录,打开settings.txt文件,增加2行,然后保存

node_mirror:https://npm.taobao.org/mirrors/node/
   npm_mirror:https://npm.taobao.org/mirrors/npm/

(2) 输入命令行nvm install node版本号(例如:nvm install 16.17.0)

(3) 安装成功后,输入命令行nvm use node版本号(nvm use 16.17.0

若报错exit status 1 则权限不够,以管理员身份运行cmd 。

具体方法:点击电脑左下方搜索->输入cmd->以管理员身份运行(命令提示符)->重新输入nvm use

(4) 验证是否成功

分别输入命令行node -vnpm -v,检验node.js以及对应npm是否安装成功,如果可以显示版本号这说明安装成功。

小窍门:

(1) 输入命令行nvm ls可查看你安装的所有node.js版本号,以及你当前所选择的node.js运行版本

(2) 如果想删除某node.js版本的话,输入命令行nvm uninstall node版本号(例如:nvm uninstall 18.10.0)即可删除对应版本

方法3

package.json增加配置

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


关注公众号:熊猫Jay字节之旅,了解更多 AI 技巧 ~


相关文章
|
13天前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
74 4
|
3天前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
2月前
|
SQL JavaScript 前端开发
Vue实现动态数据透视表(交叉表)
Vue实现动态数据透视表(交叉表)
174 13
|
2月前
|
存储 数据采集 供应链
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
5月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
224 1
|
2月前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
128 56
|
2月前
|
数据采集 资源调度 JavaScript
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
|
3月前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
3月前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
177 12
|
3月前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。