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

【问题标题】：How to set root/base url for a laravel-vujs project?如何为 laravel-vujs 项目设置 root/base url？
【发布时间】：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
    })
}

【问题讨论】：

标签： vuejs2 laravel-5.4 vue-router vuex

【解决方案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 这个问题能解决你的问题吗：stackoverflow.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

【讨论】：