Как динамически изменить baseURL axios с веб-страницы Vue?

Question

Я использую axios в проекте Vue с Spring Boot. Я хочу протестировать его как локально, так и в облаке (облачный литейный завод IBM).

Теперь я использую такие аксиозы: в 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

Каждый раз, когда я загружаю его в облако, мне приходится менять baseURL axios и перестраивать его ... Есть лучший способ сделать это? Могу ли я изменить URL-адрес со страницы Vue? Я искал, и есть несколько похожих вопросов, таких как: Vue Axios Dynamic URL Но, похоже, вопрос не такой, как этот ...

Answer 1

Предполагая, что вы создали это приложение из Vue CLI v3, вы можете определить переменные среды и использовать их для различных сборок.

Например, в своем коде

axios.defaults.baseURL = process.env.VUE_APP_API_BASE

и в каталоге вашего приложения ...

• .env

  VUE_APP_API_BASE=http://localhost:8090/api
  

• .env.production

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