Laravel Mix编译时如何根据环境传递变量自动设置JS中的env值

完全可以实现，通过Laravel Mix内置的环境变量注入能力即可完成自动化替换，操作方法如下：

方式一：直接读取注入的环境变量（无需额外配置Webpack） #

Laravel Mix会自动将项目.env文件中所有以MIX_为前缀的环境变量注入到前端代码的process.env对象中，操作步骤最少：

1. 在对应环境的.env文件中添加变量：
   • 本地开发环境.env新增：MIX_ENV_VALUE=dev
   • 生产环境.env新增：MIX_ENV_VALUE=app
2. 修改resources/js/foo/foo.js中的env变量声明：

   // 替换原来写死的env变量赋值
   const env = process.env.MIX_ENV_VALUE
   

方式二：自定义全局变量名（适配原有代码不需要修改变量引用） #

如果你不想修改原有代码中所有对env变量的引用，可以通过Webpack的DefinePlugin在编译阶段直接替换变量值：

1. 同上先在.env文件中添加对应环境的MIX_ENV_VALUE变量
2. 修改webpack.mix.js配置如下：

   const mix = require('laravel-mix');
   const webpack = require('webpack');
   
   mix.webpackConfig({
       plugins: [
           new webpack.DefinePlugin({
               'env': JSON.stringify(process.env.MIX_ENV_VALUE)
           })
       ]
   })
   // 优化原有逻辑：无需先编译到public根目录再复制，直接指定输出路径即可
   .js('resources/js/foo/foo.js', 'public/js/foo.js')
   .version();
   

3. 直接删除原有foo.js中env变量的写死声明即可，编译阶段会自动把所有env的引用替换为对应环境的变量值。

验证效果 #

• 本地执行npm run dev编译后，所有env取值为dev
• 生产环境执行npm run prod编译后，所有env取值为app

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