So importieren Sie eine JS-Konfigurationsdatei auf den Vue-Server

Inhaltsverzeichnis

Hintergrund
erreichen
Ergänzung zur Konfiguration unter vue-cli2.0
Zusammenfassen

Hintergrund

Es 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

erreichen

Nehmen 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>

Zusammenfassen

Bei 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:

Beheben Sie das Problem, dass Vue-cli3 keinen vue.config.js-Ordner hat und konfigurieren Sie den Domänennamen des Vue-Projekts
So konfigurieren Sie vue.config.js zur Verarbeitung statischer Dateien im statischen Ordner
Beschreibung und Regeleinführung der Eslint-Konfigurationsdatei eslintrc.js von Vue
Im Build-Ordner von Vue-CLI gibt es keine Datei dev-server.js zum Konfigurieren von Mock-Daten.
Detaillierte Erläuterung der Tool-Konfigurationsdatei utils.js im Vue-CLI-Scaffolding-Build-Verzeichnis
Methode der Konfigurationsdatei index.js im Konfigurationsverzeichnis des Vue-CLI-Scaffoldings
Detaillierte Erklärung der Konfigurationsdatei dev-server.js im vue-cli-Scaffolding-Build-Verzeichnis
Detaillierte Erklärung der ESlint-Konfigurationsdatei eslintrc.js in vue-cli

<<: 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

Eine ausführliche Einführung in React-Referenzen

mysql erhält das gestrige Datum, das heutige Datum, das morgige Datum und die Uhrzeit der vorherigen und der nächsten Stunde

1. Aktuelles Datum wählen Sie DATE_SUB(curdate(),...

So importieren Sie eine JS-Konfigurationsdatei auf den Vue-Server

Inhaltsverzeichnis

Hintergrund

erreichen

Ergänzung zur Konfiguration unter vue-cli2.0

Zusammenfassen

Eine ausführliche Einführung in React-Referenzen

Detaillierte Erläuterung der MySQL-Lösung zur USE DB-Überlastung

Detaillierte Erklärung zur Verwendung des Split-Befehls zum Teilen von Linux-Dateien

Verwendung von CSS-Animationseigenschaften und Beispielcode (Übergang/Transformation/Animation)

Sicherheitskonfiguration und Erkennung von SSL, nachdem die Website https aktiviert hat

Detaillierte Erläuterung von acht Möglichkeiten zur Optimierung der MySQL-Datenbank (klassische Pflichtlektüre)

Nginx verwendet ctx, um Datenfreigabe- und Kontextänderungsfunktionen zu realisieren

Natives JS zur Realisierung eines einfachen Schlangenspiels

Beispiel für die Implementierung des Lastausgleichs mit Nginx+SpringBoot

Detailliertes Tutorial zur Installation des ElasticSearch:7.8.0-Clusters mit Docker

Artikel empfehlen

JavaScript+HTML zur Implementierung eines Studenteninformationsmanagementsystems

So rufen Sie das Kennwort für MySQL 8.0.22 auf dem Mac ab

vue.js lädt Bilder entsprechend der Bild-URL herunter

So aktivieren Sie TLS- und CA-Authentifizierung in Docker

So unterstützen Sie vollständiges Unicode in MySQL/MariaDB

mysql erhält das gestrige Datum, das heutige Datum, das morgige Datum und die Uhrzeit der vorherigen und der nächsten Stunde

Versionsnummern in CSS- und JS-Links in HTML (Cache aktualisieren)

Einführung in die CSS-Technologie zur automatischen Farbanpassung von Vordergrund und Hintergrund (Demo)

js realisiert den Effekt des Tanabata-Geständnisfeuers, jQuery realisiert die Feuerfeuertechnologie

Lösung für das Problem, dass das Vue-Seitenbild nicht angezeigt wird

Detaillierte Erläuterung der Methode zur Optimierung der MySQL-Datenbanktabellenstruktur

Detaillierte Erläuterung der 4 gängigen Datenquellen in Spark SQL

Detaillierte Erklärung der MySQL-Partitionstabelle

Beispielanalyse der Verwendung von GROUP_CONCAT in MySQL

Lösung für das Problem „Linux QT Kit fehlt“ und „Version leer“