React项目使用cross-env设置环境变量不生效问题

数据老陈

2026-8-26

问题根因

react-scripts（Create React App 脚手架）对前端可访问的环境变量有固定过滤规则：只有名称以REACT_APP_开头的环境变量，才会在构建/启动阶段被注入到浏览器端运行时的process.env对象中。
你当前配置的BUILD_TYPE变量没有加这个前缀，虽然cross-env已经正常把变量设置到了启动服务的Node进程环境里，但react-scripts会把不带指定前缀的环境变量全部过滤掉，不会传给前端代码。因此前端代码里读取process.env.BUILD_TYPE得到的值永远是undefined，undefined === 'dev'判断不成立，自然会走到非开发环境的逻辑分支。这个问题和你使用WSL2 Debian的运行环境没有关系。

修复步骤

修改package.json里的启动脚本，给自定义的环境变量加上REACT_APP_前缀：

"scripts": {
    "start": "cross-env REACT_APP_BUILD_TYPE=dev react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

同步修改业务代码中的环境变量判断逻辑，对应修改变量名：

let api_base_url;
if (process.env.REACT_APP_BUILD_TYPE === 'dev') {
  api_base_url = process.env.REACT_APP_API_DEV_SERVER_URL
  console.log("dev build");
} else {
  api_base_url = process.env.REACT_APP_API_SERVER_URL;
  console.log("not a dev build");
}