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

Beispiel für automatischen Stoppeffekt nach Text-Scrollen

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

Inhaltsverzeichnis

Hintergrund

erreichen

Ergänzung zur Konfiguration unter vue-cli2.0

Zusammenfassen

Beispiel für automatischen Stoppeffekt nach Text-Scrollen

Ausführliche Lektüre und Übungsaufzeichnungen zu bedingten Typen in TypeScript

Vermeidung von durch Closures verursachten Problemen in JavaScript

So ändern Sie $ in # in Linux

Installation und Bereitstellung des Linux-Tools Nethogs zur Überwachung der Netzwerkbandbreite nach Prozess

So passen Sie die Bash-Eingabeaufforderung in Linux an

Alibaba Cloud Centos7 Installation und Konfiguration von SVN

Mit dem Befehl docker prune können Sie selten genutzte Daten regelmäßig bereinigen.

Was ist SSH-Portweiterleitung? Was nützt das?

Tipps zum Erstellen von Webseiten für Mobiltelefone

Artikel empfehlen

Linux verwendet iftop, um den Netzwerkkartenverkehr in Echtzeit zu überwachen

Tutorial zur Installation von MySQL mit Docker und zur Implementierung einer Remote-Verbindung

Implementierung des Aufbaus eines Kubernetes-Clusters mit VirtualBox+Ubuntu16

Detaillierte Erläuterung des Konzepts der Docker-Containerebenen

Detaillierte Erläuterung des grundlegenden Implementierungsprinzips von MySQL DISTINCT

Detaillierte Schritte zum Einrichten des Hosts Nginx + Docker WordPress Mysql

VPS erstellt Offline-Download-Server (nach der Ära der Netzwerkfestplatten)

Beispiel für die Installation und Bereitstellung von Docker unter Linux

IIS und APACHE implementieren die HTTP-Umleitung auf HTTPS

Chrome 4.0 unterstützt GreaseMonkey-Skripte

Wichtige Bonuselemente zur Optimierung und Verpackung des Frontends von Vue-Projekten

6 Lösungen für Netzwerkfehler im Docker-Container

So weisen Sie einer Instanz in Linux eine öffentliche IP-Adresse zu

Zusammenfassung von 10 erstaunlichen Tricks von Element-UI

Aktivieren Sie den SSHD-Vorgang im Docker