如何为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

您可以采用的一种方法是在页面的头部添加元标记(就像您可以使用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 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
});

或者您可以通过导入API_BASE_URL来设置路径config，然后在每次get/post/put/delete拨打电话时指向它axios