Detaillierte Erläuterung, wie vue-cli und Webpack statische Ressourcen verarbeiten und welche Schritte zur Verwendung von Webpack-Paketen erforderlich sind

Dieses Mal werde ich Ihnen detailliert erklären, wie Vue-Cli und Webpack statische Ressourcen verarbeiten, welche Schritte für die Webpack-Verpackung erforderlich sind und welche Vorsichtsmaßnahmen für Webpack gelten Im Folgenden werfen wir einen Blick auf praktische Fälle.

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, um einen Blick darauf zu werfen. 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 ist „./logo.png“ in <img src"./logo.png"> und im Hintergrund background: url(./logo.png) ein relativer Pfad und wird von Webpack als Abhängigkeit geladen.

Aber da logo.png kein JavaScript ist und es als abhängige Blume betrachtet wird, müssen wir es über den URL-Loader und den Datei-Loader analysieren. 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. Beispielsweise können Sie 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 require('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:

So bedienen Sie die alphanumerische Kombination von Vue-Eingabeeingaben und die Länge beträgt weniger als 30

Wie um Vue Make Amap zu betreiben und eine Echtzeit-Busanwendung zu erstellen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie vue-cli und Webpack statische Ressourcen verarbeiten und welche Schritte zur Verwendung von Webpack-Paketen erforderlich sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!