React中使用env-config.js环境变量：刷新后变量undefined问题解决

一、env.sh脚本的作用 #

这脚本核心干三件事：

• 读取.env.local里的键值对，将其转换为window._env_对象的属性，生成env-config.js文件
• 在执行npm start/dev等命令时自动运行，确保每次启动项目都使用最新的环境变量配置
• 将生成好的env-config.js复制到public目录，让React开发服务器能把它作为静态资源加载，前端代码可通过window._env_直接访问变量

二、解决页面刷新后变量undefined的问题 #

大概率是env-config.js加载时机不对或未被正确生成，按以下步骤排查修复：

1. 检查index.html的引入顺序
   必须在React的bundle脚本之前加载env-config.js，示例：

   <script src="%PUBLIC_URL%/env-config.js"></script>
   <script src="%PUBLIC_URL%/static/js/bundle.js"></script>
   

   若顺序颠倒，刷新时React代码先执行，window._env_还未挂载，就会出现undefined。
2. 确保env-config.js每次启动都重新生成
   在env.sh开头添加清理旧文件的命令，避免复用缓存的旧文件：

   rm -f public/env-config.js
   

3. 禁用开发服务器对env-config.js的缓存
   React开发服务器默认缓存静态资源，可在package.json的start命令中添加参数禁用缓存：

   "scripts": {
     "start": "env.sh && react-scripts start --no-cache"
   }
   

   若已 eject 项目，也可修改webpack.config.js，将env-config.js加入不缓存列表。

三、实现支持Docker Build覆盖的变量（无需依赖.env文件） #

要让Docker build时能直接传变量覆盖，不用修改.env.local，可修改env.sh，让它优先读取系统环境变量（Docker build的--build-arg会转换为环境变量），无对应变量时再 fallback 到.env.local的配置。

修改后的env.sh示例：

#!/bin/bash

# 先清理旧文件
rm -f public/env-config.js

# 生成env-config.js
cat > public/env-config.js << EOF
window._env_ = {
  API_URL: "${API_URL:-$(grep API_URL .env.local | cut -d '=' -f2)}",
  APP_NAME: "${APP_NAME:-$(grep APP_NAME .env.local | cut -d '=' -f2)}"
};
EOF

• ${API_URL:-xxx} 逻辑：若系统环境变量存在API_URL，则用其值；否则从.env.local读取API_URL的值
• Docker build时用以下命令即可覆盖变量：

  docker build --build-arg API_URL=https://prod-api.com -t my-react-app .
  

  生成的env-config.js中API_URL会自动替换为你传入的生产环境地址，无需改动.env.local。

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