Vue & Webpack: Globale Entwicklungs- und Produktionsvariablen

Question

Ich verwende vue-cli, um meine Web-App zu erstellen. Meine app verwendet eine API in einer Reihe von Orten in etwa so:

axios.post(API + '/sign-up', data).then(res => { 
    // do stuff 
}); 

Die API Variable ist eine Konstante, die den Anfang der Adresse enthält, z.B. https://example.com.

Wie würde ich erkennen, ob dies ein Dev oder Prod Build ist und diese Variable entsprechend einstellen? Denn jetzt habe ich einen Script-Tag in meinem Dokument index.html und Ich ändere es manuell für Entwickler und prod:

<script>var API = 'https://example.com'</script> 

Gibt es einen besseren Weg, dies zu umgehen?

Answer 1

Wenn Sie die vue-cli webpack-Vorlage verwenden, werden im Ordner config zwei Dateien angezeigt: dev.env.js und prod.env.js.

Beide Dateien enthalten ein Objekt, das im gesamten Vue App global verfügbar:

dev.env.js

module.exports = merge(prodEnv, { 
    NODE_ENV: '"development"' 
}) 

prod.env.js

module.exports = { 
    NODE_ENV: '"production"' 
} 

Beachten Sie, dass Zeichenfolgewerte die verschachtelten einfachen und doppelten Anführungszeichen erfordern.

dev.env.js

module.exports = merge(prodEnv, { 
    NODE_ENV: '"development"', 
    API: '"http://localhost:8000"' 
}) 

prod.env.js

module.exports = { 
    NODE_ENV: '"production"', 
    API: '"https://api.example.com"' 
} 

Nun ist die Variable kann innerhalb eines beliebigen Vue zugegriffen werden: Sie können Ihre eigenen Variablen wie so hinzufügen Methode aus dem process.env Objekt:

process.env.API