Windows11: Ant Design Pro项目创建运行问题

文章简介

本文章主要记录本人在Windows 11下创建和运行Ant Desig Pro项目时遇到的问题，以及本人在网上查询学习后找到的解决方法。( 怎么一步一个问题啊 \ (ㄒoㄒ)∠)_ )
版本配置：node.js --> v18.17.1,npm --> 9.8.1,yarn --> 1.22.19,ant design pro v5

问题一: 运行 create-umi 报错“文件名、目录名或卷标语法不正确”

问题：
在运行"yarn create umi"命令时，系统出现如下错误：

success Installed "create-umi@XX.XX" with binaries:
- create-umi
文件名、目录名或卷标语法不正确.   
error Command failed.
Exit code: 1  
Command:D:\SoftwareDevelopment\node\node_global\bin\create-umi

报错原因：
Command所指目录下的create-umi.cmd文件中的路径出错：

@"%~dp0\C:\Users\bai\AppData\Local\Yarn\Data\global\node_modules\.bin\create-umi.cmd"   %*  

解决办法：
删除C盘前边的"%~dp0\ "，改后如下：

@"C:\Users\bai\AppData\Local\Yarn\Data\global\node_modules\.bin\create-umi.cmd"   %*

保存后重新运行"create-umi"
(参考束子熊:运行create-umi报错 的解决办法 )

问题二：无法将“umi”项识别为 cmdlet、函数…

问题：
在解决问题一后，运行"create-umi"，结果系统报错无法将“umi”项识别为 cmdlet、函数...

报错原因：
没有配置环境变量。
解决办法：
将问题一中"bin"文件夹路径(如我的是"D:\SoftwareDevelopment\node\node_global\bin")加入到系统环境变量中。

问题三：error:0308010C:digital envelope routines::unsupported

问题：
在运行Ant Design Pro项目时，输入"yarn run start"命令，出现如下错误：

Waiting for the debugger to disconnect...
node:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)  
    ...

报错原因：

查了下原因，主要是 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制，nodeJs v17 之前版本没影响，但 V17 和之后版本会出现这个错误。

解决办法:
打开"package.json"文件，在"start":命令前加入：

SET NODE_OPTIONS=--openssl-legacy-provider

以我的为例：

//原指令
"start": "cross-env UMI_ENV=dev umi dev",
//修改后
"start": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env UMI_ENV=dev umi dev",

之后保存，重新运行即可。
(参考巴啦啦臭魔仙:Ant Design Pro 报错 error:0308010C)

问题四：An unexpected error occurred: "EPERM: operation not permitted, unlink

问题:
在给Ant Design Pro添加Umi ui时，执行命令yarn add @umijs/preset-ui -D报错：

error An unexpected error occurred: "EPERM: operation not permitted, unlink 'D:\\JavaCode\\...\\node_modules\\esbuild\\esbuild.exe'".

报错原因：

权限不足：不允许操作
当前项目是运行中状态，使用快捷键ctrl+c关掉项目，然后重新安装依赖即可！

解决办法：
关掉VScode重新打开，再次执行yarn add @umijs/preset-ui -D命令。(改了半天，结果发现重启下VScode就行了(╯‵□′)╯︵┻━┻)
(参考Smile sea breeze 的解决办法)