Windows环境下修改ReactJS构建文件夹路径的异常问题

问题原因 #

你当前的BUILD_PATH设置方式在Windows环境下会导致路径解析异常：set BUILD_PATH=C:/Tomcat/webapps未用引号包裹路径值，react-scripts读取环境变量时会错误解析绝对路径格式，最终将构建文件输出到错误的相对路径中，同时生成空的目标目录。

修复方案 #

方案1：给路径添加引号（Windows原生写法） #

修改package.json中的build脚本，用双引号包裹BUILD_PATH的路径值（注意转义JSON中的引号）：

"scripts": {
  "build": "set \"BUILD_PATH=C:/Tomcat/webapps\" && react-scripts build",
  ...
}

也可以使用Windows原生反斜杠路径（同样需要转义反斜杠）：

"scripts": {
  "build": "set \"BUILD_PATH=C:\\Tomcat\\webapps\" && react-scripts build",
  ...
}

方案2：使用cross-env实现跨平台兼容 #

如果需要兼顾Windows和Linux/macOS环境，推荐使用cross-env包统一环境变量设置语法：

1. 安装依赖：

npm install cross-env --save-dev

2. 修改build脚本：

"scripts": {
  "build": "cross-env BUILD_PATH=C:/Tomcat/webapps react-scripts build",
  ...
}

原理说明 #

• Windows的cmd命令行中，set命令设置变量时，未加引号的值可能会被命令解析器拆分，导致react-scripts无法正确识别完整的绝对路径。
• cross-env会在不同操作系统下自动适配环境变量的设置方式，避免因平台语法差异导致的路径解析错误。

内容的提问来源于stack exchange，提问作者Harsh Kanakhara