Change the default base url for axios
Putting my two cents here. I wanted to do the same without hardcoding the URL for my specific request. So i came up with this solution.
To append 'api'
to my baseURL, I have my default baseURL set as,
axios.defaults.baseURL = '/api/';
Then in my specific request, after explicitly setting the method and url, i set the baseURL to '/'
axios({
method:'post',
url:'logout',
baseURL: '/',
})
.then(response => {
window.location.reload();
})
.catch(error => {
console.log(error);
});
Instead of
this.$axios.get('items')
use
this.$axios({ url: 'items', baseURL: 'http://new-url.com' })
If you don't pass method: 'XXX'
then by default, it will send via get
method.
Request Config: https://github.com/axios/axios#request-config
- Create .env.development, .env.production files if not exists and add there your API endpoint, for example:
VUE_APP_API_ENDPOINT ='http://localtest.me:8000'
- In main.js file, add this line after imports:
axios.defaults.baseURL = process.env.VUE_APP_API_ENDPOINT
And that's it. Axios default base Url is replaced with build mode specific API endpoint. If you need specific baseURL for specific request, do it like this:
this.$axios({ url: 'items', baseURL: 'http://new-url.com' })