如何在React前端使用Heroku的Config Vars？生产环境配置遇阻求助

我来帮你搞定这个问题——你遇到的核心痛点其实是前端代码无法在生产构建阶段正确注入Heroku的环境变量，毕竟React是静态应用，变量得在打包时就硬编码到代码里，而不是运行时去读取。下面分两种常见场景给你一步步解决：

一、如果你用的是Create React App（CRA） #

这是最简单的情况，CRA已经帮你做了大部分配置：

1. Heroku端配置
   登录Heroku后台，找到你的应用 → 进入Settings → 找到Config Vars，添加你的变量，注意变量名必须以REACT_APP_开头（比如REACT_APP_API1、REACT_APP_API2），不然CRA会自动忽略这些变量。

2. 本地开发
   本地项目根目录新建.env文件，同样写REACT_APP_API1=https://your-api-url.com，CRA会自动加载这个文件，开发时直接用process.env.REACT_APP_API1就能拿到值。

3. 部署到Heroku
   不用改任何代码！Heroku在执行npm run build（CRA默认的build命令）时，会自动把你设置的REACT_APP_开头的Config Vars注入到打包后的代码里。你只需要确保package.json里的build命令是"build": "react-scripts build"就行。

二、如果你用的是自定义Webpack配置 #

这种情况需要手动调整Webpack插件，你之前的DefinePlugin写法可能有小问题，调整一下就好：

1. Heroku端配置
   同样在Heroku后台设置Config Vars，变量名建议还是用REACT_APP_前缀（避免和系统变量冲突），当然不用前缀也可以，但要保持前后一致。

2. 调整Webpack配置
   核心是开发环境用dotenv-webpack加载本地.env，生产环境直接用Heroku暴露的系统环境变量，通过DefinePlugin注入到代码中：

   const webpack = require('webpack');
   const Dotenv = require('dotenv-webpack');
   
   module.exports = (env, argv) => {
     const isProduction = argv.mode === 'production';
     const plugins = [];
   
     // 开发环境加载本地.env文件
     if (!isProduction) {
       plugins.push(new Dotenv());
     }
   
     // 生产环境注入Heroku的环境变量
     plugins.push(new webpack.DefinePlugin({
       // 手动指定变量，注意必须用JSON.stringify转成字符串字面量
       'process.env.REACT_APP_API1': JSON.stringify(process.env.REACT_APP_API1),
       'process.env.REACT_APP_API2': JSON.stringify(process.env.REACT_APP_API2),
       // 如果变量多，可以用循环批量处理
       ...Object.fromEntries(
         Object.keys(process.env)
           .filter(key => key.startsWith('REACT_APP_'))
           .map(key => [`process.env.${key}`, JSON.stringify(process.env[key])])
       ),
       // 保留Webpack默认的NODE_ENV配置
       'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development')
     }));
   
     return {
       // ...你的其他Webpack配置
       plugins
     };
   };
   

3. 关键注意事项

   • 一定要用JSON.stringify()：DefinePlugin是做字符串替换的，如果直接写process.env.REACT_APP_API1: process.env.REACT_APP_API1，打包后会变成变量名而不是实际值，必须转成字符串字面量。
   • 本地测试生产构建：可以在本地终端运行REACT_APP_API1=https://test-api.com npm run build，然后打开build文件夹里的index.html，查看打包后的JS文件，搜索变量名确认是否被替换成了实际值。
   • Heroku的build命令：确保package.json里的build命令指向你的Webpack生产构建，比如"build": "webpack --mode production"。

三、常见排查点 #

如果还是不行，检查这几点：

• 确认Heroku的Config Vars已经保存生效，可以在Heroku终端运行heroku config查看变量是否存在。
• 检查打包后的代码：部署后打开浏览器开发者工具，在Sources里找到打包后的JS文件，搜索你的变量名，看是否被替换成了实际值。
• 不要在运行时读取环境变量：前端代码在浏览器里跑，没有process.env这个对象，所有变量必须在构建阶段注入完成。

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