Laravel Mix整合React项目：如何读取.env文件中的常量

嘿，这个场景我太熟了！Laravel Mix其实内置了读取.env变量的能力，只是有个关键的小规则容易被忽略，下面一步步给你讲规范的处理方式：

• 第一步：给前端需要的.env变量加前缀
  Laravel Mix默认只会自动加载以MIX_开头的环境变量，这样做是为了区分后端专用的敏感变量和前端可访问的变量。所以你需要把Firebase相关的密钥在.env文件里改成这样：

  MIX_FIREBASE_API_KEY=your-firebase-api-key
  MIX_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
  MIX_FIREBASE_PROJECT_ID=your-project-id
  

  记住：只有前端需要用到的变量才加这个前缀，后端专用的变量别加，防止被打包到前端代码里泄露。

• 第二步：在代码中直接使用变量
  不需要额外配置webpack.mix.js的复杂逻辑，Laravel Mix会自动把这些MIX_开头的变量注入到process.env对象中。你可以直接在React组件里调用：

  // React组件中使用
  const firebaseConfig = {
    apiKey: process.env.MIX_FIREBASE_API_KEY,
    authDomain: process.env.MIX_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.MIX_FIREBASE_PROJECT_ID,
  };
  

  如果你想简化变量名（比如去掉MIX_前缀），也可以在webpack.mix.js里通过Webpack的DefinePlugin手动映射：

  const mix = require('laravel-mix');
  const webpack = require('webpack');
  
  mix.react('resources/js/app.js', 'public/js')
      .webpackConfig({
          plugins: [
              new webpack.DefinePlugin({
                  'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.MIX_FIREBASE_API_KEY),
                  'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.MIX_FIREBASE_AUTH_DOMAIN),
              })
          ]
      });
  

  这样在React里就可以直接用process.env.FIREBASE_API_KEY了。

• 第三步：注意缓存问题
  如果你修改了.env里的变量，一定要重启Laravel Mix的编译进程（比如停止npm run watch再重新启动），不然Mix会沿用之前缓存的变量值，导致新的变量不生效。

这个方案是Laravel官方推荐的规范做法，完全符合Mix的设计逻辑，不用临时方案也能完美解决你的问题~

内容的提问来源于stack exchange，提问作者i.brod