How to change the dynamic baseUrl Laravel + Vue.js?

Question

How do I set the baseUrl so if I switch from server to server on the frontend (Vue.js), it changes dynamically to baseUrl?

I show my code axios-auth.js code:

 import axios from 'axios'

 const instance = axios.create({
    baseURL: 'http://mvp.test/api/public/api/'
   // baseURL: 'http://127.0.0.1:8000/api/' for testing localhost
 });

and my .env file which have standard code for laravel.

Answer 1

Taken from the official mix documentation , you can use an environment variable by creating a key in your .env prefixed with MIX_ :

MIX_BASE_URL=http://mvp.test/api/public/api/

And run php artisan config:clear to be sure the new config is set.

Then, in javascript you can access the variable inside the process.env object:

process.env.MIX_BASE_URL

So you can simply use it like this:

const instance = axios.create({
    baseURL: process.env.MIX_BASE_URL
});