如何在Laravel的resources/js/app.js中获取.env文件的APP_DEBUG值

方案1：通过Laravel Mix注入环境变量 #

Laravel 8默认使用Laravel Mix打包前端资源，只有带MIX_前缀的.env变量会被自动注入到前端JS上下文：

1. 修改.env文件，添加对应配置：

# 原有的APP_DEBUG保留，新增以下参数
MIX_APP_DEBUG="${APP_DEBUG}"
# 调试模式闲置时长，单位毫秒，示例为30秒方便测试
MIX_IDLE_TIME_DEBUG=30000
# 生产模式闲置时长，单位毫秒，示例为30分钟
MIX_IDLE_TIME_PROD=1800000

2. 重新执行前端编译命令，让新的环境变量生效：
   npm run dev 或 npm run prod
3. 在resources/js/app.js中直接调用变量初始化idlejs：

import Idle from 'idlejs'

const idleTimeout = process.env.MIX_APP_DEBUG === 'true' 
  ? Number(process.env.MIX_IDLE_TIME_DEBUG)
  : Number(process.env.MIX_IDLE_TIME_PROD)

const idle = new Idle({
  timeout: idleTimeout,
  onIdle: () => {
    // 你的登出逻辑，示例为跳转登出路由
    window.location.href = '/logout'
  }
}).start()

方案2：通过Blade模板注入全局变量（更简便，无需重新编译JS） #

直接在全局布局模板中把配置输出为JS全局变量：

1. 在你的主布局Blade文件（通常为resources/views/layouts/app.blade.php）的head标签内，引入app.js之前添加以下代码：

<script>
window.IDLE_TIMEOUT = {{ config('app.debug') ? 30000 : 1800000 }};
</script>

2. 在resources/js/app.js中直接调用全局变量：

import Idle from 'idlejs'

const idle = new Idle({
  timeout: window.IDLE_TIMEOUT,
  onIdle: () => {
    window.location.href = '/logout'
  }
}).start()

• 用方案1时修改.env参数后没有重新执行前端编译命令，新的环境变量没有被注入到打包后的JS文件
• 环境变量没有加MIX_前缀，Laravel Mix不会把非MIX_前缀的变量注入到前端上下文

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