So importieren Sie eine JS-Konfigurationsdatei auf den Vue-Server
HintergrundEs gibt eine lokale Konfigurationsdatei im Projekt:
// src/bildposition.js
Standard exportieren {
Bezeichnung: 'Homepage',
Wert: 'home',
Daten: [
{
Beschriftung: 'Karussell',
Wert: „Karussell“
}
]
}
Jeder weiß, wie man auf eine lokale Datei verweist: Importieren Sie ImagePosition aus „./image-position.js“. Jetzt müssen Sie die Datei image-position.js auf dem Server ablegen und den Link dazu abrufen: xxx.com/static/imag… Eine direkte Angabe der Dateiadresse ist Ihnen derzeit natürlich nicht möglich. importiere ImagePosition von 'https://xxx.com/static/image-position.js' // FEHLER Diese Abhängigkeit wurde nicht gefunden erreichenNehmen Sie zunächst eine kleine Änderung an image-position.js vor, um ein globales Objekt ImagePosition verfügbar zu machen
// Geänderte image-position.js
(Funktion (global, Fabrik) {
Typ der Exporte === 'Objekt' und Typ des Moduls !== 'undefiniert'
? module.exports = fabrik()
: Typ der Definition === 'Funktion' und definition.amd
? definieren(Fabrik)
: (global = global || selbst, global.Bildposition = Fabrik());
}(diese, (Funktion () {
„streng verwenden“;
zurückkehren {
Bezeichnung: 'Homepage',
Wert: 'home',
Daten: [
{
Beschriftung: 'Karussell',
Wert: „Karussell“
}
]
};
})));
Fügen Sie externe Elemente zur Datei vue.config.js hinzu.
modul.exporte = {
konfigurierenWebpack: config => {
config.externals = {
'Bildposition': 'Bildposition'
}
}
}
index.html unterscheidet die Umgebung und importiert JS-Dateien.
// öffentlich/index.html
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1, Benutzerskalierung=nein">
<Titel><%= htmlWebpackPlugin.options.title %></Titel>
</Kopf>
<Text>
<div id="app"></div>
<!-- erstellte Dateien werden automatisch eingefügt -->
<% wenn (NODE_ENV == 'Produktion') { %>
<script src="http://xxx.com/static/image-position.js"></script>
<% } sonst { %>
<script src="http://test.xxx.com/static/image-position.js"></script>
<% } %>
</body>
</html>
Nachdem Sie die obigen Schritte abgeschlossen haben, können Sie problemlos auf die Datei image-position.js verweisen.
importiere ImagePosition aus „Bildposition“
console.log(Bildposition)
// {label: 'Home', value: 'home', data: [{label: 'Karussell', value: 'Karussell'}]}
Ergänzung zur Konfiguration unter vue-cli2.0
// build/webpack.base.conf.js
modul.exporte = {
Äußerlichkeiten: {
// Füge „Bildposition“ hinzu: „Bildposition“
}
}
// index.html
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1, Benutzerskalierung=nein">
<Titel><%= htmlWebpackPlugin.options.title %></Titel>
</Kopf>
<Text>
<div id="app"></div>
<!-- erstellte Dateien werden automatisch eingefügt -->
<% wenn (Prozess.Umgebung == 'Produktion') { %>
<script src="http://xxx.com/static/image-position.js"></script>
<% } sonst { %>
<script src="http://test.xxx.com/static/image-position.js"></script>
<% } %>
</body>
</html>
ZusammenfassenBei der Optimierung des Verpackungsvolumens von Vue-Projekten ist CDN-Beschleunigung eine häufig verwendete Methode. Das Obige ist tatsächlich der Implementierungsinhalt der CDN-Beschleunigung. Die Drittanbieterbibliothek wird über das Skript-Tag eingeführt, wodurch die Größe der gepackten vendor.js-Datei erheblich reduziert wird. Wenn wir lokale Dateien remote auf einem Server platzieren möchten, liegt der Schlüssel im ersten Schritt des Implementierungsprozesses. Der restliche Inhalt ist derselbe wie beim Konfigurieren der CDN-Beschleunigung. Oben finden Sie Einzelheiten dazu, wie Vue die JS-Konfigurationsdatei auf den Server importiert. Weitere Informationen zum Importieren der JS-Konfigurationsdatei durch Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Zeigen Sie die Anzahl der Dateien in jedem Unterordner eines angegebenen Ordners in Linux an
>>: Beispiel zum Hochladen eines Docker-Images in ein privates Repository
Artikel empfehlen
Implementierungsbeispiel für die Message Board-Funktion von Node.js+Express
Inhaltsverzeichnis Nachrichtenbrett Erforderliche...
Chrome überwacht Cookie-Änderungen und weist Werte zu
Der folgende Code führt die Überwachung von Cooki...
Detaillierte Erklärung des Responsive-Prinzips von Vue3
Inhaltsverzeichnis Überprüfung der responsiven Pr...
translate(-50%,-50%) in CSS erzielt horizontalen und vertikalen Zentrierungseffekt
translate(-50%,-50%)-Attribute: Verschieben Sie e...
Detaillierte Erläuterung der DOM-Stileinstellungen in vier Reaktionskomponenten
1. Inline-Stile Um Inline-Stile zum virtuellen DO...
Drei Diskussionen zum Iframe Adaptive Height Code
Beim Erstellen einer B/S-Systemschnittstelle stößt...
Web realisiert den Code zum Öffnen des Fensters zum Hochladen von Dateien durch Klicken auf das Bild
Code kopieren Der Code lautet wie folgt: <Stil...
Vue nutzt Amap zur Realisierung der Stadtpositionierung
In diesem Artikel wird der spezifische Code von V...
Eine kurze Analyse des Hinzufügens von Listener-Ereignissen bei Wertänderungen in der HTML-Eingabe
Der zu erzielende Effekt In vielen Fällen überwac...
Vergleich zwischen Node.js und Deno
Inhaltsverzeichnis Vorwort Was ist Deno? Vergleic...
Fallstudie zum Unterschied zwischen JavaScript parseInt() und Number()
Lernziele: Die beiden Funktionen parseInt() und N...
So verwenden Sie Typescript zum Kapseln von lokalem Speicher
Inhaltsverzeichnis Vorwort Szenarien für die Verw...
Vue implementiert WebSocket-Kundendienst-Chatfunktion
In diesem Artikel wird hauptsächlich die Implemen...
Detaillierte Erläuterung der Beispiele für CSS-Gewichtswerte (Kaskadierung)
•Es gibt viele Selektoren in CSS. Was passiert, w...
5 Tipps zum Schutz Ihres MySQL Data Warehouse
Durch die Aggregierung von Daten aus verschiedene...