vscode中vue报错：Building for production...Error: error:0308010C:digital envelope routines::unsupported

一、问题

最近好多问题大概率都是因为网课年代比较久远了，版本问题导致的，晕一下~
回归正题↓
学到项目上线部署发布之前端项目打包测试运行模块时，在vscode命令行中输入命令“npm run build”，发现报错：

PS D:\vscode\edu-boss> npm run build

> edu-boss@0.1.0 build
> vue-cli-service build


/  Building for production...Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (D:\vscode\edu-boss\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\vscode\edu-boss\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\vscode\edu-boss\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\vscode\edu-boss\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\vscode\edu-boss\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\vscode\edu-boss\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\vscode\edu-boss\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
/  Building for production...Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
|  Building for production...D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:114
                        throw e;
                        ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (D:\vscode\edu-boss\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\vscode\edu-boss\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\vscode\edu-boss\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\vscode\edu-boss\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\vscode\edu-boss\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at context.callback (D:\vscode\edu-boss\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\vscode\edu-boss\node_modules\cache-loader\dist\index.js:147:7
    at D:\vscode\edu-boss\node_modules\graceful-fs\graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:189:23) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v20.10.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

二、原因

特地去复盘了一下，网课中所用node.js版本是14，而我的版本如报错的最后一行所示是20，应该就是这个问题了。
这个错误主要是由于 Node.js 17 及其后续版本中默认启用了 OpenSSL 3.0，而某些依赖于 Webpack 的包还没有适配这个更高版本的 OpenSSL。因此，在构建 Vue 项目时会遇到这种错误。
在网上找解决方案就是降级node.js版本，但是本人很避免“冲突”，不喜欢改一些容易引发蝴蝶效应的东西，所以找到了另外的方法。

三、解决

可以通过设置环境变量来绕过 OpenSSL 3.0 的问题。具体操作是，在执行构建命令之前，设置NODE_OPTIONS 环境变量。
1.在vscode的命令行中输入$env:NODE_OPTIONS = “–openssl-legacy-provider”，回车

PS D:\vscode\edu-boss> $env:NODE_OPTIONS = "--openssl-legacy-provider"
1

2.再次输入构建命令npm run build（注意仍然是在项目目录下输入）

PS D:\vscode\edu-boss> npm run build

> edu-boss@0.1.0 build
> vue-cli-service build


/  Building for production...Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
-  Building for production...Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
\  Building for production...Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
|  Building for production...Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Browserslist: caniuse-lite is outdated. Please run:
 WARNING  Compiled with 2 warnings                                                                                15:59:52

 warning 

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  static/js/chunk-vendors.f75b9c6a.js (871 KiB)
  static/js/courses.da9f396c.js (295 KiB)

 warning 

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.07 MiB)
      static/css/chunk-vendors.902ebb66.css
      static/js/chunk-vendors.f75b9c6a.js
      static/css/app.ab693237.css
      static/js/app.d7c05da8.js


  File                                      Size             Gzipped

  dist\static\js\chunk-vendors.f75b9c6a.    871.06 KiB       236.40 KiB
  js
  dist\static\js\courses.da9f396c.js        295.40 KiB       95.61 KiB
  dist\static\js\app.d7c05da8.js            15.22 KiB        5.25 KiB
  dist\static\js\common.690eb7c5.js         0.63 KiB         0.40 KiB
  dist\static\css\app.ab693237.css          208.32 KiB       32.91 KiB
  dist\static\css\courses.009eba23.css      10.45 KiB        2.73 KiB
  dist\static\css\chunk-vendors.902ebb66    0.97 KiB         0.41 KiB
  .css
  dist\static\css\common.b2fb1ada.css       0.52 KiB         0.28 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

这个时候就可以看到构建成功，而不必降级node.js版本啦！