React应用生产环境中如何访问环境变量？

核心规则先搞清楚 #

用create-react-app搭建的项目，只有前缀为REACT_APP_的环境变量会被打包进生产构建，而且是构建时硬编码到代码里的——也就是说，构建完成后再改环境变量没用，必须重新构建。

具体解决步骤 #

• 配置好生产环境变量文件
  在项目根目录创建.env.production文件，所有变量必须以REACT_APP_开头，示例：

  REACT_APP_API_BASE=https://prod.yourdomain.com/api
  REACT_APP_ENV=production
  

  要是用CI/CD工具（比如GitHub Actions、GitLab CI）部署，直接在平台的环境变量/secrets里设置带REACT_APP_前缀的变量就行，不用本地的.env.production文件。

• 用正确的命令构建生产包
  必须执行npm run build（或yarn build）生成生产构建，这个命令会自动加载.env.production的变量。别用npm start，那是开发环境的启动命令，不会加载生产环境变量。

• 需要动态改变量？试试运行时注入
  不想每次改变量都重新打包的话，把变量放在public/index.html里通过全局对象暴露：

  <!-- public/index.html -->
  <script>
    window.APP_ENV = {
      API_URL: "%API_URL_PLACEHOLDER%"
    };
  </script>
  

  部署时用脚本或服务器配置替换占位符：

  • Shell脚本构建后替换示例：

    sed -i 's/%API_URL_PLACEHOLDER%/https://prod.yourdomain.com/api/g' build/index.html
    

  • Nginx配置替换示例：

    server {
      # ...其他配置
      location / {
        root /path/to/your/build;
        sub_filter '%API_URL_PLACEHOLDER%' 'https://prod.yourdomain.com/api';
        sub_filter_once off;
      }
    }
    

  之后代码里直接用window.APP_ENV.API_URL访问变量即可。

• 验证变量是否注入成功
  构建完成后，打开build/static/js/main.*.js文件，搜索你的变量名（比如REACT_APP_API_BASE），能找到对应的实际值就说明配置没问题；搜不到的话，检查变量前缀是否正确，或者构建命令有没有用错。

内容的提问来源于stack exchange，提问作者Yash P. Saitwal