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

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

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

Artikel empfehlen

So lösen Sie das Problem, das Root-Passwort von Mysql auf dem Mac zu vergessen

Ich habe MySQL auf meinem Computer längere Zeit n...

5 Möglichkeiten, um festzustellen, ob ein Objekt in JS ein leeres Objekt ist

1. Konvertieren Sie das JSON-Objekt in eine JSON-...

JavaScript verwendet setTimeout, um einen Countdown-Effekt zu erzielen

Um die Fähigkeit zum Schreiben von nativem JavaSc...

Problem der Inkonsistenz der MySQL-Multiplikations- und Divisionsgenauigkeit (vier Dezimalstellen nach der Division)

Frage Als ich heute eine Projektfunktion schrieb,...

Detaillierte Erklärung der Verwendung von Bildschirmbefehlen in Linux

GUN-Bildschirm: Offizielle Website: http://www.gn...

Beispiel für einen Persistenzbetrieb mit Gearman + MySQL

Dieser Artikel verwendet die Gearman+MySQL-Method...

Beispielcode zur Implementierung eines 3D-Zauberwürfels mit CSS

Lassen Sie uns heute einen einfachen 3D-Zauberwür...

Detaillierte Erläuterung der Verbindungslimitkonfiguration von Nginx für IP-Adressen in einem Netzwerksegment

Das sogenannte Verbindungslimit in Nginx ist tats...

Verwenden von MySQL unter Windows: Implementieren automatischer zeitgesteuerter Sicherungen

1. Schreiben Sie ein Backup-Skript rem Autor:www....

Häufig verwendete HTML-Meta-Enzyklopädie (empfohlen)

Der Meta-Tag ist ein Hilfstag im Head-Bereich der...

Beispiele für die Implementierung und Verwendung von geplanten MySQL-Aufgaben

Dieser Artikel veranschaulicht anhand von Beispie...

Anweisungen zur Verwendung des HTML-Tags dl dt dd

Grundaufbau: Code kopieren Der Code lautet wie fol...

Drei Diskussionen zum Iframe Adaptive Height Code

Beim Erstellen einer B/S-Systemschnittstelle stößt...

Führen Sie die folgenden Schritte aus, um HugePages schnell unter Linux zu konfigurieren

Vorwort Bezüglich der HugePages- und Oracle-Daten...

MySQL SQL-Anweisungsmethode zum Ausblenden der mittleren vier Ziffern der Mobiltelefonnummer

Erste Abfragetabellenstruktur (sys_users): WÄHLEN...