React中如何使用.env文件？自定义.env.staging环境配置失效求助

别担心，我来帮你搞定这个自定义环境变量的问题！你之前的命令没生效，主要是因为React Scripts默认只会根据NODE_ENV的值自动加载对应的.env.development或.env.production，不会主动识别.env.staging这类自定义后缀的文件，而且你用的set命令只在Windows系统生效，跨平台性也差。下面给你两个可靠的解决方案：

方案一：使用env-cmd包（推荐） #

这个包可以让你直接指定要加载的环境变量文件，简单直观还跨平台：

1. 安装依赖
   在项目根目录运行命令：

   # npm
   npm install env-cmd --save-dev
   # 或者 yarn
   yarn add env-cmd --dev
   

2. 修改package.json的脚本命令
   把你原来的build_staging替换成：

   "build_staging": "env-cmd -f .env.staging react-scripts build"
   

   这样执行npm run build_staging时，React就会自动加载.env.staging里的所有环境变量（记得变量要以REACT_APP_开头，比如REACT_APP_API_URL=https://staging.example.com）。

   如果需要同时设置NODE_ENV为staging（方便代码里做环境判断），可以加上cross-env来保证跨平台兼容：

   # 先安装cross-env
   npm install cross-env --save-dev
   

   然后命令改成：

   "build_staging": "cross-env NODE_ENV=staging env-cmd -f .env.staging react-scripts build"
   

方案二：不依赖额外包，手动指定环境变量 #

如果你不想加新依赖，可以手动设置环境变量并利用React的环境变量加载规则：

用cross-env统一成跨平台版本（避免Windows和Mac/Linux的命令差异）：

# 先安装cross-env
npm install cross-env --save-dev

然后修改命令：

"build_staging": "cross-env NODE_ENV=staging REACT_APP_ENV=staging react-scripts build"

不过这种方式下，你需要把staging环境的变量直接写在命令里，或者放在.env文件中，不如env-cmd直接加载.env.staging文件方便。

最后再提醒一句：所有要在React应用中访问的环境变量，必须以REACT_APP_为前缀，否则React Scripts会忽略它们哦！

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