Probleme beim statischen Vue-Ressourcenpaketieren

Dieses Mal werde ich Ihnen die Probleme bei der statischen Ressourcenverpackung vorstellen. Was sind die Vorsichtsmaßnahmen bei der statischen Ressourcenverpackung von Vue?

① Die Standardkonfiguration von vue-cli wird in einem bestimmten Pfad bereitgestellt.

② Die CSS-Datei führt zu einem Pfadfehler nachdem relative Pfade für die statische Ressourcenverpackung verwendet wurden.

1. Problem

Die von vue-cli scaffolding generierte Standardverpackung ist die Konfigurationsdatei. Stellen Sie das Projekt nach dem Packen in einem bestimmten Pfad bereit:

//ip:port/public/springActivity/

Zu diesem Zeitpunkt besuchen Sie:

http://ip:port/public/springActivity/index.html

index.html kann normal zugegriffen werden, aber die referenzierten JS-, CSS- und anderen Dateiserverantworten sind alle 404. Überprüfen Sie den importierten Ressourcenpfad wie folgt:

http://ip:port/static/css /app.cea07642cd24c0d7a5c4b9b7afc7ff64.css

http://ip:port/static/js/app.815851e87b083afb82bf.js

2. Analyse

Aus dem Obigen geht hervor, dass die Der Ressourcenpaketpfad ist falsch. Die gepackten Ressourcen verwenden den absoluten Stammverzeichnispfad. Wenn das Projekt also in einem bestimmten Verzeichnis bereitgestellt wird, kann der eingeführte Ressourcenpfad nicht korrekt analysiert werden.

3. Um das Problem zu lösen

müssen Sie beim Packen relative Pfade verwenden, um statische Ressourcen zu verarbeiten. Ändern Sie die Konfiguration des Ressourcenfreigabepfads im Build (config/index.js, Build-Objekt):

Ändern Sie assetPublicPath: '/' in assetPublicPath: './',

Verpacken Sie es erneut, stellen Sie die Ressourcen in einem bestimmten Pfad bereit und greifen Sie dann zu:

Zu diesem Zeitpunkt indizieren Auf .html kann normal zugegriffen werden, und gleichzeitig kann auch normal auf JS- und CSS-Ressourcen zugegriffen werden, aber die großen Bildressourcen im in CSS eingeführten Assets-Verzeichnis weisen einen Fehler auf (Server 404)

4 -analyze

Sehen Sie sich den importierten Bildressourcenpfad wie folgt an:

http://ip:port/public/springActivity/static/css/static/img/question_bg.61a2825.png

Der Ressourcenpfad im eigentlichen Projekt lautet wie folgt:

index.html
static/
 |--js/
  |--*.js
 |--css/
  |--*.css
 |--img/
  |--*.png

Offensichtlich ist der Bildimportpfad falsch. Bei der Analyse des Bildimportpfads haben wir festgestellt, dass der Pfad zwei zusätzliche Verzeichnisse hat: „/static/css“. Es wird vermutet, dass die CSS-Datei im CSS-Verzeichnis den Bildpfad nach „/static/img/question_bg.61a2825.png“ importiert. . Überprüfen Sie die CSS-Datei, css Der in eingeführte Bildpfad lautet wie folgt:

Hintergrund:url(static/img/question_bg.61a2825.png)

5. Beim Lösen der

css-Datei liegt ein Problem mit dem Pfad im Paket vor. Bei der Analyse des Verpackungsprozesses wurde festgestellt, dass dies der Fall ist In js eingeführt oder in die Vue-Datei geschrieben. Die CSS-Datei wird zuerst von less, postcss usw. verarbeitet. Nach der Verarbeitung wird sie von

ExtractTextPlugin verarbeitet. ExtractTextPlugin extrahiert das gesamte CSS in js in die App. CSS-Datei.

Setzen Sie zuerst options.extract auf false, deaktivieren Sie die CSS-Extraktionsfunktion, packen Sie es erneut und stellen Sie es in einem bestimmten Verzeichnis bereit. Besuchen Sie: http://ip:port/public/springActivity/index.html, Knall, Seite Die normale Anzeige zeigt an, dass der Grand Duke kurz vor der Fertigstellung steht.

Bei der Analyse der gepackten Dateien wurde festgestellt, dass keine CSS-Datei vorhanden war und alle CSS-Dateien in der Datei app.js gefunden wurden. CSS wurde über js in die Datei index.html eingefügt, also die Bildressource Der in die CSS-Datei eingeführte Pfad sollte relativ zum Dateipfad index.html sein, d kann normal aufgerufen werden.

background:url(static/img/question_bg.61a2825.png)

Jetzt weiß ich sicher, wo das Problem liegt, nämlich: ExtractTextPlugin hat den Ressourceneinführungspfad beim Extrahieren der CSS-Datei nicht konvertiert , wodurch die App. css statische Ressourcen einführt, die relativ zum Verzeichnis app.css sind: static/css/static/img/.png.

Daher müssen Sie bei Verwendung des ExtractTextPlugin-Plugins auch die statischen Ressourcenpfadparameter konfigurieren. Durch die Abfrage der Daten haben wir erfahren, dass dieses Problem durch Hinzufügen von publicPath gelöst werden kann: „../.. /":

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader',
 publicPath:"../../"     //添加
 })
}

Greifen Sie nach dem Packen und Bereitstellen in einem bestimmten Verzeichnis auf die Datei index.html zu. Alles auf der Seite ist normal, die Datei app.css wird normal importiert und Bildressourcen werden ebenfalls importiert Normalerweise überprüfen Sie die Datei app.css, um Bildressourcen wie folgt zu importieren:

background: url(../../static/img/question_bg.61a2825.png

Nachdem publicPath konfiguriert wurde, wird die Pfadkonfiguration vor dem in der CSS-Datei eingeführten Bilddateipfad hinzugefügt.

Der publicPath-Attributwert ist der relative Pfad von der gepackten app.css-Datei zur index.html Datei

Bildressourcen können auch direkt im von vue-cli generierten statischen Verzeichnis abgelegt werden, um die oben genannten Probleme zu vermeiden. Auf diese Weise kann jedoch die MD5--Zeichenfolge nicht zum Bildnamen hinzugefügt werden , was der Versionskontrolle nicht förderlich ist

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie man Datepicker verwendet

Detaillierte Erklärung der Verwendung von High-Level-Komponenten von Mixin

D3.js erstellt Logistikkarte

Das obige ist der detaillierte Inhalt vonProbleme beim statischen Vue-Ressourcenpaketieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!