如何为 laravel-vujs 项目设置 root/base url？

Posted 2023-02-22

【中文标题】如何为 laravel-vujs 项目设置 root/base url？

【英文标题】：How to set root/base url for a laravel-vujs project?

【发布时间】：2018-02-10 05:44:28

【问题描述】：

我已经将一个 VueJS 项目部署到像 www.example.com/demos/app, 这样的域中 但是当我从 axios 向 api 发送请求时，它指向的是 www.example.com/login 而不是 www.example.com/demos/app/login

这是我使用axios的请求代码

export const login = ( dispatch ,  payload, context ) => 
    return axios.post('/login', payload).then((response) => 
        // do something
    ).catch((error) => 
        // handle erros
    )

【参考方案1】：

您可以解决此问题的一种方法是在您的页面头部添加一个元标记（就像您对 csrf 所做的那样），然后在您的 bootstrap.js 文件中引用它：

头

<meta name="api-base-url" content=" url('demos/app') " />

bootstrap.js（在window.axios = require('axios'); 下方）

window.axios.defaults.baseURL = document.head.querySelector('meta[name="api-base-url"]').content;

希望这会有所帮助！

【讨论】：

document.head.querySelector('meta[name="api-base-url"]').content;这将在测试期间导致问题（vue 测试），

@EmekaMbah 这个问题能解决你的问题吗：***.com/questions/49820828/…?

【参考方案2】：

在 config.js 中：

const CONFIG = 
  API_URL_ROOT: 'http://localhost:8000/api/v1/',


export default CONFIG;

你可以像这样设置 axios 默认值：

import config from '../config.js';

axios.create(
  baseURL: config.API_BASE_URL
);

或者您可以通过从config 导入API_BASE_URL 来设置路径，然后在每次使用axios 进行get/post/put/delete 调用时指向它

【讨论】：

我不明白你说的config.js是什么意思

您可以保留一个配置文件，在其中存储各种配置，并将图像导入到必要的地方

很棒的解决方案

我更喜欢这个解决方案，@Rwd 的解决方案在测试期间会导致问题，因为 document.head.querySelector('meta[name="api-base-url"]').content ;不可用。

【参考方案3】：

Laravel 自带 axios 并在 bootstrap.js 中导入，所以只需转到 bootstrap.js 并添加以下内容：

window.axios.defaults.baseURL = 'http://example.test';

您可以在window.axios.defaults.headers.common 行之后添加它 -其他信息：

axios.create 将创建一个具有自己的全局 url 和配置的实例。如果您有多个 url 或配置，并且想在不同的组件中使用它，请使用它。

【参考方案4】：

在项目根目录下创建vue.config.js（如果不存在）-

在vue.config.js -

module.exports = 
    publicPath: process.env.NODE_ENV === 'production'
        ? '/demos/app/'
        : '/'

然后，在resources/js/bootstrap.js 中添加一行 -

const publicPath = require("../../vue.config");
window.axios.defaults.baseURL = publicPath