Detaillierte Erläuterung der vue-cli+webpack-Verarbeitung statischer Ressourcen und der Webpack-Paketierungsschritte

Dieses Mal erkläre ich Ihnen ausführlich die Schritte für vue-cli+webpack zur Verarbeitung statischer Ressourcen und zur Webpack-Verpackung. Was sind die Vorsichtsmaßnahmen für vue-cli+webpack zur Verarbeitung statischer Ressourcen und Webpack? Hier sind praktische Fälle, werfen wir einen Blick darauf.

Die Fallstricke der Webpack-Verpackung über Vue-cli

Das von Vue-cli für das Vue-Projekt gebaute Gerüst ist zwar sehr praktisch, aber Das Verpacken ist einfach. Eine leere Seite wird angezeigt oder die entsprechende statische Ressource kann nicht geladen werden.

Ich habe es gelöst, indem ich den assetPublicPath von index.js unter project/config in „./“ geändert und ihn in einen relativen Pfad umgewandelt habe.

cd vue demo 
 npm run dev //运行程序 
npm run bulid //webpack打包

Verarbeitung statischer Ressourcen

Möglicherweise stellen Sie fest, dass wir in Projekten, die Vue-Cli mit Webpack kombinieren, normalerweise zwei statische Ressourcenpfade haben : src/assets und static/. Was ist der Unterschied zwischen ihnen? In diesem Artikel wird hauptsächlich die Kombination von Vue-Cli und Webpack für den Umgang mit statischen Ressourcen vorgestellt. Der Herausgeber hält dies für recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf. Ich hoffe, es kann allen helfen.

Gepackte Ressourcen

Um diese Frage zu beantworten, müssen wir zunächst verstehen, wie Webpack mit statischen Ressourcen umgeht. In der *.vue-Komponente werden alle Vorlagen und CSS-Module von vue-html-loader und css-loader analysiert, um die Pfad-URL zu finden.

Zum Beispiel in <img src"./logo.png"> und Hintergrund <a href="http://www.php.cn/wiki/892.html" target="_blank">Hintergrund<code><a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>: url(./logo.png): url(./logo.png), „./logo.png“ ist ein relativer Pfad und wird als Abhängigkeit von Webpack geladen.

Aber da logo.png kein JavaScript ist, müssen wir es über den URL-Loader und den Datei-Loader analysieren, wenn es als abhängige Blume betrachtet wird. Diese Vorlage hat den entsprechenden Loader bereits für Sie konfiguriert, sodass Sie sich normalerweise keine Gedanken über Probleme bei der relativen Pfadbereitstellung machen müssen.

Auch wenn diese Ressourcen während des Build-Prozesses eingebunden/kopiert/umbenannt werden, sind sie immer noch ein wichtiger Teil des Quellcodes. Aus diesem Grund empfehlen wir, statische Ressourcen wie andere Ressourcenordner in einem separaten Ordner /src abzulegen.

Tatsächlich müssen Sie sie nicht alle in /src/assets ablegen, sondern können sie nach Modulen/Komponenten organisieren und nutzen. Sie können beispielsweise beliebige Komponenten in einem eigenen Verzeichnis ablegen und statische Ressourcen in diesem Verzeichnis speichern.

Regeln zur Ressourceneinführung

Relative Pfade wie ./assets/logo.png werden in Modulabhängigkeiten analysiert. Sie werden durch eine automatisch generierte URL ersetzt, die auf Ihrer Webpack-Ausgabekonfiguration basiert.

Ein Pfad ohne Präfix, wie zum Beispiel asset/logo.png, ist dasselbe wie ein relativer Pfad und wird in ./assets/logo.png maskiert.

Ein Pfad mit einem ~-Präfix . ~ gilt als Modulanforderung, genau wie <a href="http://www.php.cn/wiki/136.html" target="_blank">require<code><a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>('some-module/image.png')('some-module/ image .png'). Stammpfad, z. B. /assets/log.png

Ressourcenpfad in JavaScript abrufen

computed: {
 background () {
 return require('./bgs/' + this.id + '.jpg')
 }
}

Dieser Ressourcenpfad wird auch von verarbeitet file-loader Geben Sie dann den verarbeiteten Pfad zurück. Und Webpack lädt alle Bilder im BGS-Verzeichnis auf einmal.

"Echte" statische Ressourcen

Im Gegensatz dazu wird keine der Dateien in static/ von Webpack verarbeitet. Sie werden direkt in den Zielordner kopiert und es müssen absolute Pfade verwendet werden, um auf diese Dateien zu verweisen.

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:

Detaillierte Erläuterung der Schritte, mit denen PHP die Google-Schnittstelle aufruft, um einen QR-Code zu generieren

Ausführliche Erläuterung der Schritte zur Verwendung der PHPThumb-Bildverarbeitung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der vue-cli+webpack-Verarbeitung statischer Ressourcen und der Webpack-Paketierungsschritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!