方法/步骤
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
。
如下图所示: