Vue - Vue CLI - API Variables

Question

What is the best way to set api url's based on current domain location within the Vue Instance? In angular I would be using something similar to Angular Environment However I have not come accross anything similar with Vue or Axios.

In this case my setup is dependent on multiple environments ( local, dev, stage, prod ). All based on domain relationship.

localhost = '/api-call'

dev.domain.com = 'devapi.domain.com'

prod.domain.com = 'prodapi.domain.com'

Any help at all would be incredible!

Answer 1

Oftentimes what I would do is store it on the backend in the config file and then set the variable in axios, but you could also test the browser URL on the front-end and set axios accordingly. When creating the axios instance you would set the baseURL property to your main site url.

var instance = axios.create({
      baseURL: 'https://' + window.location.host + '/api/',
      timeout: 1000,
      headers: {'X-Custom-Header': 'foobar'}
});