Hbuilder X 创建Vue2项目详细过程

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