Laravel/Vue.js生产编译后如何修改Axios的Base URL？

问题根源 #

你当前使用的process.env.MIX_APP_URL是编译阶段由Webpack注入的静态值，打包后就固定在代码里了，所以生产环境修改.env文件根本不会生效。要实现不用重新编译就能变更URL，得让Vue在运行时动态从Laravel获取配置值。

解决方案步骤 #

1. 在Laravel Blade模板中注入全局URL变量 #

找到你的主Blade模板（一般是resources/views/app.blade.php），在<head>标签内或者Vue入口脚本加载前，添加一段脚本，把.env里的APP_URL挂载到全局window对象上：

<script>
    // 运行时从Laravel环境动态获取URL
    window.APP_URL = "{{ env('APP_URL') }}";
</script>

注意：这段脚本必须放在Vue的入口脚本（比如<script src="{{ mix('js/app.js') }}"></script>）之前，确保Vue初始化时能读取到这个变量。

2. 修改Axios配置使用全局变量 #

把原来Axios配置里的process.env.MIX_APP_URL替换成window.APP_URL：

const token = localStorage.getItem("store_token");
if (token) {
    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
}

// 改用运行时全局变量
const API_URL = window.APP_URL;
// 如果你的API路径需要加后缀（比如/backend/），直接拼接即可
// const API_URL = window.APP_URL + '/backend/';

axios.defaults.baseURL = API_URL;

const options = {
    timeout: 60000,
    params: {} // 保留用于后续添加参数
};
const instance = axios.create(options);

3. 生产环境部署后的操作 #

• 修改Laravel根目录下的.env文件，更新APP_URL为对应域名
• 清理Laravel配置缓存（如果开启了缓存）：

php artisan config:clear
php artisan cache:clear

• 刷新前端页面，Axios就会自动使用新的Base URL，完全不用重新编译Vue应用

关键说明 #

这种方案的核心是运行时动态获取：Laravel在渲染页面时从.env读取最新的APP_URL，注入到前端全局变量，Vue运行时直接读取这个变量，绕开了编译时静态注入的限制，完美适配多域名生产环境的需求。

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