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

Question

I've deployed a VueJS project to a domain like www.example.com/demos/app, But when I send a request to api from axios it is pointing to www.example.com/login instead of www.example.com/demos/app/login

Here is my request code using axios

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

Answer 1

One way you could go about this is to add a meta tag to the head of your page (like you may do with the csrf) and then reference it in your bootstrap.js file:

head

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

bootstrap.js (underneath window.axios = require('axios');)

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

Hope this helps!