Laravel+Vue中MIX_环境变量编译后硬编码无法动态更新问题

问题本质 #

Laravel Mix 会在编译阶段将带有MIX_前缀的.env变量注入并硬编码到JS文件中，编译完成后修改.env无法同步更新前端变量。要实现动态更新，需让前端从后端实时获取配置，而非编译时固化。

方案一：后端接口返回环境变量 #

1. 添加后端路由
   在routes/web.php中新增接口，返回需要的.env变量：

Route::get('/api/env', function () {
    return response()->json([
        'API_URL' => env('APP_URL'),
        // 按需添加其他非敏感变量
    ]);
});

2. 修改前端env.js为动态获取
   替换原env.js内容，改为异步请求后端接口：

let ENV = {};

export const loadEnv = async () => {
    try {
        const res = await fetch('/api/env');
        ENV = await res.json();
    } catch (err) {
        // 请求失败时使用默认值
        ENV = { API_URL: 'https://localhost' };
        console.error('环境变量加载失败:', err);
    }
};

export default ENV;

3. 前端初始化时加载变量
   在App.js中先加载变量再执行业务逻辑：

import ENV, { loadEnv } from './config/env';

(async () => {
    await loadEnv();
    const API_URL = ENV.API_URL;
    // 后续依赖API_URL的代码放在这里执行
})();

方案二：模板嵌入全局变量（更高效） #

直接在Laravel模板文件（如resources/views/layouts/app.blade.php）的<head>中注入全局变量，前端无需额外请求：

<script>
    window.APP_CONFIG = {
        API_URL: "{{ env('APP_URL') }}"
    };
</script>

前端直接使用全局变量：

// App.js中直接调用
const API_URL = window.APP_CONFIG.API_URL;

注意事项 #

• 仅暴露非敏感变量给前端，禁止将密码、密钥等敏感信息返回或嵌入。
• 方案一需考虑接口权限，可添加中间件限制访问；方案二适合服务端渲染场景，页面刷新即可获取最新值。

内容的提问来源于stack exchange，提问作者José Manuel Rodríguez