Axiosのエンドポイントを環境によって切り替える方法

axios による非同期処理を行うとき、本番環境と開発環境が以下のようになるとします。

  • 本番環境: http://production.com/api
  • 開発環境: http://localhost:8080/api

こういったとき、ハードコーディングしていると修正が大変になります。
これを、環境に合わせて変更する方法はないでしょうか?

You can create a new instance of axios with a custom config.

axios.create([config])

const instanceDev = axios.create({
 baseURL: 'http://localhost:8080/api',
})
const instanceProd = axios.create({
 baseURL: 'http://production.com/api',
})

Determine the current environment and call the instance.

process.env.NODE_ENV === 'production'? instanceProd : instanceDev 

Which file should I write it?

If your project was created by vue-cli3.
For example.

  1. Create baseUrl.js
let baseUrl= ""; 
switch (process.env.NODE_ENV) {
    case 'development':
        baseUrl = "http://localhost:8080/api"
        break;
    case 'production':
        baseUrl = "http://production.com/api"
        break;
}
 
export default baseUrl;
  1. Use it under the file you want to use axios.
import axios from 'axios';
import baseUrl from './baseUrl '
const instance = axios.create({
 baseURL: baseUrl,
// some options......
})

Now using npm run serve is development environment url, and npm run build is production environment url.