Wie vue-cli und webpack mit statischen Ressourcen umgehen

Verarbeitung statischer Ressourcen

Sie bemerken möglicherweise, dass wir in Projekten, die Vue-Cli mit Webpack kombinieren, normalerweise zwei statische Ressourcenpfade haben: src/assets und static/ , was ist das? 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 ein relativer Pfad, der geladen wird als Abhängigkeit von Webpack.

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. ~ wird als Modulanforderung betrachtet, 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 per Datei verarbeitet -loader und gibt 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.

Verwandte Empfehlungen:

Beispiele für das Laden statischer Ressourcenpfade und -konstanten in thinkphp5

JavaScript-Tutorial zur Verarbeitung statischer Ressourcendateianforderungen Methode

10 empfohlene Artikel über statische Ressourcen

Das obige ist der detaillierte Inhalt vonWie vue-cli und webpack mit statischen Ressourcen umgehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!