Vue - Vue CLI - API Variablen

Question

Was ist der beste Weg, um API-URLs basierend auf der aktuellen Domain-Position innerhalb der Vue-Instanz festzulegen? In eckigen würde ich etwas Ähnliches wie Angular Environment verwenden, aber ich habe nichts Vergleichbares mit Vue oder Axios.

In diesem Fall ist mein Setup abhängig von mehreren Umgebungen (lokal, dev, stage, prod). Alles basierend auf einer Domänenbeziehung.

localhost = '/ API-Aufruf'

dev.domain.com = 'devapi.domain.com'

prod.domain.com = 'prodapi.domain.com'

Jede Hilfe wäre unglaublich!

Answer 1

Oft was ich tun würde, ist es auf dem Backend in der Konfigurationsdatei zu speichern und dann die Variable in Axios zu setzen, aber Sie könnten auch die Browser-URL auf dem Frontend testen und Axios entsprechend einstellen. Wenn Sie die Axios-Instanz erstellen, würden Sie die baseURL-Eigenschaft auf Ihre Haupt-Site-URL setzen.

var instance = axios.create({ 
     baseURL: 'https://' + window.location.host + '/api/', 
     timeout: 1000, 
     headers: {'X-Custom-Header': 'foobar'} 
});