Bezüglich des Problems des Extrahierens projektbezogener Konfigurationsdateien beim Packen von vue-cli (ausführliches Tutorial)

Im Folgenden werde ich Ihnen eine detaillierte Erklärung der projektbezogenen Konfigurationsdateien beim Packen basierend auf Vue-Cli geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Vorwort: Wenn Sie vue-cli für die Entwicklung verwenden, müssen Sie häufig einige Einstellungen dynamisch konfigurieren, z. B. die Anforderungsadresse der Schnittstelle (axios.defaults.baseURL). Diese Einstellungen müssen möglicherweise nach dem festgelegt werden Das Projekt ist kompiliert, daher müssen wir in vue-cli diese Konfigurationsdateien extrahieren, um zu verhindern, dass Webpack die Konfigurationsdateien kompiliert.

Zuerst müssen wir eine neue js-Datei unter /static als Konfigurationsdatei erstellen

Der Inhalt darin ist wie folgt:

window.g={
 AXIOS_TIMEOUT:10000,
 SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服务器地址
}

Hier werden alle Konfigurationen in ein Attribut des Fensterobjekts eingefügt

und dann dieses js

<script src="/static/js/config.js"></script>

in den Index einfügen .html zur Verwendung im Projekt Wenn Sie window.g verwenden, verwenden Sie window.g direkt, um den Inhalt dieser Konfigurationsdatei aufzurufen.

Beim Packen nach einer solchen Konfiguration wird dieser Effekt erzeugt

Sie können sehen, dass die Konfigurationsdatei hier so ausgegeben wird, wie sie ist, und nicht Wenn wir das kompilierte Front-End-Projekt zur Bereitstellung an das Bereitstellungspersonal übergeben, müssen wir nicht im Voraus nach der Hintergrundadresse fragen. Das Bereitstellungspersonal kann die Serveradresse direkt ermitteln, indem es den Inhalt in der Konfiguration ändert .

Auf diese Weise können die projektbezogenen Konfigurationsdateien getrennt werden.

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

JavaScript-Sternnavigationsleisten-Implementierungsmethode

Berechnung, Filterung, Abruf, Satz von vue.js Detaillierte Erklärung Verwendung und Unterschiede

Detaillierte Erläuterung des gesamten Prozesses vom Kauf eines Domainnamens bis zur Verwendung von pm2 zur Bereitstellung des node.js-Projekts

Das obige ist der detaillierte Inhalt vonBezüglich des Problems des Extrahierens projektbezogener Konfigurationsdateien beim Packen von vue-cli (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!