Vue.js: global base URL of server side application

Question

In a small Vue application I'm working on there is code like this:

this.axios.post('https://localhost:8000/api/auth/login',.......).

The https://localhost:8000 needs to change after deploying to a server since the server side of the application will be hosted at a different IP address/port. I want to define something like a BASE_URL that can be read from a configuration file or something like that, which means the above code would change to something like:

this.axios.post(`${BASE_URL}/api/auth/login`)

What's the best way to do this within Vue.js? Initially baseUrl sounded promising, but that doesn't seem to be what I need.

Andrei Savin · Accepted Answer · 2019-08-05 04:03:47Z

4

You can use environment variables to define your base url. For example, create files .env.development and .env.production at the base of your project:

VUE_APP_BASE_URL=https://localhost:8000

Then, you can specify the base url as part of the axios config:

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL

The vue application will change depending what mode you use to build, for example npm run build -- --mode development or npm run build -- --mode production

answered Aug 5, 2019 at 4:03

Andrei Savin

2,5044 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sweet Chilly Philly · Accepted Answer · 2019-08-05 04:02:45Z

1

You can create a .env file in your root, and reference that: https://cli.vuejs.org/guide/mode-and-env.html#modes

answered Aug 5, 2019 at 4:02

Sweet Chilly Philly

3,2372 gold badges31 silver badges43 bronze badges

Collectives™ on Stack Overflow

Vue.js: global base URL of server side application

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related