CODEWITHSUNDEEP
vue.jsaxios
Haz Wof
Haz Wof

Reputation: 183

How to dynamically change axios's baseURL from Vue's web page?

I'm using axios in a Vue project with Spring Boot. I want to test it on both local and cloud (IBM's cloud foundry).

Now I''m using axios like this: in main.js:

var axios = require('axios')
//axios.defaults.baseURL = 'https://demoproject2.au-syd.mybluemix.net/api'
axios.defaults.baseURL = 'https://demoproject1.au-syd.cf.appdomain.cloud/api'
// axios.defaults.baseURL = 'http://localhost:8090/api'
Vue.prototype.$axios = axios

Every time I upload it to the cloud, I have to change axios' baseURL and rebuild it... Is there a better way to do this? Can I change the url from the Vue page? I have searched, and there are some similar questions like this: Vue Axios Dynamic URL But it appears not exactly the question as this...

Upvotes: 2

Views: 2860

Answers (1)

Phil
Phil

Reputation: 164762

Assuming you've created this app from Vue CLI v3, you can define environment variables and use those for your various builds.

For example, in your code

axios.defaults.baseURL = process.env.VUE_APP_API_BASE

and in your app directory...

  • .env

    VUE_APP_API_BASE=http://localhost:8090/api

  • .env.production

    VUE_APP_API_BASE=https://demoproject1.au-syd.cf.appdomain.cloud/api

Upvotes: 1

Related Questions