在React项目中使用Laravel环境变量区分环境是否为良好实践？

你的这个通过Laravel的welcome.blade.php注入meta标签来传递环境变量的思路，其实是完全可行的！不过结合React和Laravel的生态，还有几个更优雅的方案可以参考，下面我给你拆解一下：

先说说你的当前方案怎么落地（如果还没写完的话） #

在React里读取这个meta标签的代码可以这么写：

// 在React组件或API配置文件里
const getAppEnv = () => {
  const metaTag = document.querySelector('meta[name="app_env"]');
  return metaTag ? metaTag.content : 'local'; // 兜底默认本地环境
};

const APP_ENV = getAppEnv();
const API_BASE_URL = APP_ENV === 'production' 
  ? 'https://your-heroku-app-domain.com/api' 
  : 'http://localhost:8000/api';

这个方式的优点是零额外配置，完全依赖Laravel端的环境变量注入，非常适合你这种前后端同部署在Heroku的场景。

更贴合生态的优化方案 #

方案1：用Laravel Mix直接注入环境变量（推荐） #

如果你的React是用Laravel自带的Mix构建的（比如通过laravel new project --react创建的项目），可以直接在webpack.mix.js里配置环境变量注入：

// webpack.mix.js
mix.react('resources/js/app.js', 'public/js')
  .options({
    processCssUrls: false
  })
  .env({
    // 把Laravel的env变量传给React
    APP_ENV: process.env.APP_ENV,
    API_BASE_URL: process.env.API_URL || 'http://localhost:8000/api'
  });

之后在React里就能直接用process.env.APP_ENV和process.env.API_BASE_URL了，完全不需要手动读取meta标签，更符合React项目的常规写法。而且Heroku会自动加载你在后台设置的Laravel环境变量，生产环境构建时会自动替换成对应的值。

方案2：React独立使用.env文件（适合前后端分离场景） #

如果之后你想把React单独部署，或者更偏向React的原生环境变量管理，可以在React项目根目录创建这两个文件：

• .env.local（本地开发用，不会被Git提交）：

REACT_APP_ENV=local
REACT_APP_API_BASE_URL=http://localhost:8000/api

• .env.production（生产构建用）：

REACT_APP_ENV=production
REACT_APP_API_BASE_URL=https://your-heroku-app-domain.com/api

⚠️ 注意：React的环境变量必须以REACT_APP_开头才会被Create React App或Vite这类构建工具识别。

部署到Heroku时，你不需要上传.env.production，直接在Heroku的「Settings」→「Config Vars」里添加REACT_APP_ENV=production和REACT_APP_API_BASE_URL=https://xxx，构建时Heroku会自动读取这些变量注入到React项目中。

Heroku部署的小提醒 #

不管用哪种方案，记得在Heroku的Config Vars里把APP_ENV设置为production，本地开发时Laravel的.env里保持APP_ENV=local就好。如果用Mix构建，Heroku的构建命令要包含npm run prod（或者npx mix production），确保生产环境的构建能正确注入变量。

总的来说，你的初始方案没问题，但方案1更适合当前Laravel+React同部署的场景，用起来更顺手～

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