New Jan 20, 2026

Best practice to switch between development and production urls when using Vue/Vite and Django

Libraries, Frameworks, etc. All from Newest questions tagged vue.js - Stack Overflow View Best practice to switch between development and production urls when using Vue/Vite and Django on stackoverflow.com

I want to build a website with Vue/Vite as frontend and Django as a backend.
When my frontend needs to get data from the backend I currently do something like this (which works perfectly fine):
const response = await fetch('http://localhost:8000/api/register', {...

But for a production environment I (probably?) want something like this to be able to switch between dev and prod without manually changing every url:
const response = await fetch(backend_url + '/register', {...

My Question is, what is the best/standard way to setup this backend_url in Vue/Vite?

Kind regards
feps

My Search so far:
Vue has a provide/inject feature which could be used to define a gloable Variables in my App.vue file.
Vite has "Shared options" defined in vite.config.js
But for both options I was unable to find any example, which leaves me wondering if there is another option which I was unable to find, which is used to solve this "problem".

Scroll to top