如何配置Laravel Mix在开发环境下使用.env.development文件？

我明白你遇到的困扰——当NODE_ENV=development时，Laravel Mix总是默认读取根目录的.env文件，而非预期的.env.development。这是因为Mix默认依据APP_ENV环境变量匹配对应配置文件，而非NODE_ENV。下面是两种可行的解决方案：

方案一：修改package.json脚本，同时指定APP_ENV与NODE_ENV #

你可以在dev脚本中额外设置APP_ENV=development，让Mix自动识别并加载.env.development。调整后的scripts配置如下：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development APP_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }
}

注：通常cross-env安装后直接调用即可，无需写完整路径，我这里简化了脚本里的cross-env调用方式。

方案二：在webpack.mix.js中手动指定加载的.env文件 #

如果不想修改脚本，你可以在项目根目录的webpack.mix.js顶部，借助dotenv包（Laravel Mix已内置依赖，无需额外安装）手动加载对应环境的配置文件：

// 优先加载对应NODE_ENV的.env文件
require('dotenv').config({ path: `.env.${process.env.NODE_ENV}` });

// 你的Mix配置代码
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

这样设置后，当NODE_ENV=development时会加载.env.development，NODE_ENV=production时则加载.env.production，完全按照NODE_ENV的值匹配对应配置文件。

验证配置是否生效 #

运行npm run dev后，你可以在前端代码中添加测试代码验证：

// 在resources/js/app.js中添加
console.log(process.env.APP_NAME);

打开浏览器控制台，查看输出是否与.env.development中的配置一致，以此确认是否加载了正确的环境文件。

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