【解决】修改 UI界面渲染层级 的常见误区

一、问题描述

今天运行yarn run dev命令，出现ERROR Error: error:0308010C:digital envelope routines::unsupported错误：

yarn run v1.22.19
$ vue-cli-service serve
 INFO  Starting development server...
95% emitting CompressionPlugin ERROR  Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at D:\workspace\xxx-new\xxx-ui\node_modules\compression-webpack-plugin\dist\index.js:243:42
    at CompressionPlugin.compress (D:\workspace\xxx-new\xxx-ui\node_modules\compression-webpack-plugin\dist\index.js:284:9)      
    at D:\workspace\xxx-new\xxx-ui\node_modules\compression-webpack-plugin\dist\index.js:305:12
    at _next1 (eval at create (D:\workspace\xxx-new\xxx-ui\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:14:17)
    at eval (eval at create (D:\workspace\xxx-new\xxx-ui\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:33:1)   
    at D:\workspace\xxx-new\xxx-ui\node_modules\copy-webpack-plugin\dist\index.js:91:9
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

二、问题原因

看了错误栈，之前升级过Node版本，第一反应这个错误应该是和Node的版本有关（node升级版本过高）。
之前的Node版本16.18.0，而升级后的版本是18.14.0。新版本node.js（ node 17+）使用了OpenSSL3.0对允许算法和密钥大小增加了严格的限制。

三、解决方案

（1）切换Node版本：
可以使用nvm来管理Node版本：
如果系统是Windows，可以参考《Windows 上安装nvm》
如果系统是Mac OS，可以参考《Mac上安装nvm》
（2）启用legacy OpenSSL provider
通过下面的命令行操作起来更容易：
Unix (Linux, macOS, Git bash等)：

export NODE_OPTIONS=--openssl-legacy-provider

Windows：

set NODE_OPTIONS=--openssl-legacy-provider

PowerShell：

$env:NODE_OPTIONS = "--openssl-legacy-provider"

或在项目中的package.json文件下更改scripts加上这行代码：

SET NODE_OPTIONS=--openssl-legacy-provider &&