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

Question

我已经将 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
    })
}

Answer 1

在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 调用时指向它

Answer 2

解决此问题的一种方法是将元标记添加到页面的头部（就像您可能对 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;

希望对您有所帮助！

Answer 3

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

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

您可以在 window.axios.defaults.headers.common 行之后添加

-附加信息：

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

Answer 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

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

How to set root/base url for a laravel-vujs project?

vuejs2

laravel-5.4

vue-router

vuex