So packen Sie statische Ressourcen in Vue

In diesem Artikel werden hauptsächlich die Fallstricke und Lösungen bei der statischen Ressourcenverpackung von Vue vorgestellt. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

Dieser Artikel löst hauptsächlich das Problem

①.vue-cli-Standardkonfiguration wird gepackt und in einem bestimmten Pfad bereitgestellt, wenn der statische Ressourcenpfadfehler auftritt;

②. Nachdem statische Ressourcen mithilfe relativer Pfade gepackt wurden, führt die CSS-Datei zu einem großen Bildpfadfehlerproblem.

1. Problem

Führen Sie npm run build unter der von vue-cli scaffolding generierten Standardverpackungskonfigurationsdatei aus und stellen Sie das Projekt in einem bestimmten Pfad bereit:

/ /ip:port/public/springActivity/

Zu diesem Zeitpunkt besuchen Sie:

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

index.html OK Normaler Zugriff, 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 ist ersichtlich, dass der Ressourcenverpackungspfad ist falsch und die gepackten Ressourcen werden verwendet. Absoluter Stammverzeichnispfad. Wenn das Projekt also in einem bestimmten Verzeichnis bereitgestellt wird, kann der eingeführte Ressourcenpfad nicht korrekt aufgelöst 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

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

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

5 Pfad in der CSS-Datei, es muss sein: Welcher Teil des Paketressourcenpfads ist nicht richtig konfiguriert? Die CSS-Datei wird zuerst von less, postcss usw. verarbeitet und dann von ExtractTextPlugin verarbeitet. Alle CSS in js werden in die Datei app.css extrahiert.

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, bang, page 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-Plug-Ins auch die Parameter des statischen Ressourcenpfads konfigurieren. Durch die Abfrage der Informationen wissen Sie, dass Sie dieses Problem durch Hinzufügen von publicPath lösen können: „../.. /":

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

Packaging Greifen Sie nach der Bereitstellung 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 auch normal importiert. Überprüfen Sie Die app.css-Datei zum Importieren von Bildressourcen wie folgt:

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

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

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

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

Das Obige ist das, wofür ich kompiliert habe Ich hoffe, dass es in Zukunft für alle hilfreich sein wird:

Wie man den Animationseffekt des Abprallens vom Rand in

erzielt

So verwenden Sie sass im Vue CLI Webpack (ausführliches Tutorial)

So ändern Sie den P-Tag-Textwert in jQuery

Das obige ist der detaillierte Inhalt vonSo packen Sie statische Ressourcen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!