Hbuilder X 创建Vue2项目详细过程

在升级到Node.js18.15.0后,由于OpenSSL3.0的严格限制,Vue项目构建时遇到error:0308010C:digitalenveloperoutines::unsupported错误。该问题可以通过在系统环境变量中添加NODE_OPTIONS,值设为--openssl-legacy-provider来解决。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方法/步骤
1.首先打开Hbuilder创建一个新项目,如下图所示
在这里插入图片描述
2.接着模板选择Vue项目,如下图所示
在这里插入图片描述
3.然后等待一会项目就创建好了,如下图所示
在这里插入图片描述
4.接着右键单击选择npm run build,如下图所示
在这里插入图片描述
5.然后继续右键单击选择npm run serve,如下图所示
在这里插入图片描述
6.接着找底部出现的地址和端口号,如下图所示
在这里插入图片描述
7. 最后在浏览器中输入即可访问vue页面了,如下图所示
在这里插入图片描述

遇见的困难

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 (W:\VueTest\Vue_Demo\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (W:\VueTest\Vue_Demo\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (W:\VueTest\Vue_Demo\node_modules\webpack\lib\NormalModule.js:449:10)
    at W:\VueTest\Vue_Demo\node_modules\webpack\lib\NormalModule.js:481:5
    at W:\VueTest\Vue_Demo\node_modules\webpack\lib\NormalModule.js:342:12
    at W:\VueTest\Vue_Demo\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (W:\VueTest\Vue_Demo\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (W:\VueTest\Vue_Demo\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (W:\VueTest\Vue_Demo\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16)
    at W:\VueTest\Vue_Demo\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.15.0

npm run serve报错信息

出现原因:

当 nodejs 升级到17+版本以后,开始支持 OpenSSL 3.0,而 OpenSSL 3.0 对各种摘要算法做了更严格的限制,可能会导致一些程序运行错误。具体原因参考由nodejs升级引起的构建错误:0308010C:digital envelope routines::unsupported - 掘金 (juejin.cn)

解决方法:

增加系统环境变量

Windows系统下,可在系统环境变量里添加一个新的变量:NODE_OPTIONS,值为:--openssl-legacy-provider
如下图所示:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值