Detaillierte Erläuterung des Unterschieds zwischen vue2.0-Ressourcendateien und statischen Assets

In diesem Artikel wird hauptsächlich der Unterschied zwischen vue2.0-Ressourcendatei-Assets und statischen Ressourcen vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Ressourcendateiverarbeitung

In unserer Projektstruktur gibt es zwei Ressourcendateipfade, nämlich: src/assets und static/. Was ist also der Unterschied zwischen den beiden?

Webpacked-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 von vue-html-loader und css-loader analysiert, um die URL der Ressource zu finden.

Zum Beispiel sind in 6b1107076a21b84c95dbb8e2465f1198 und im Hintergrund: url(./logo.png), "./logo.png" beide relative Ressourcenpfade von Webpack in Modulabhängigkeiten analysiert werden.

Da logo.png kein JavaScript ist und es als Modulabhängigkeit betrachtet wird, müssen wir zur Verarbeitung einen URL-Loader und einen File-Loader verwenden. In der Vorlage sind diese Lader bereits konfiguriert, sodass Sie relative Pfade/Modulpfade verwenden können, ohne sich über Bereitstellungsprobleme Gedanken machen zu müssen. Da diese Ressourcen zur Build-Zeit eingefügt/kopiert/umbenannt werden können, sind sie im Wesentlichen Teil Ihres Quellcodes. Aus diesem Grund empfehlen wir, vom Webpack verarbeitete statische Ressourcen wie andere Quelldateien unter dem Pfad /src zu platzieren. Tatsächlich müssen Sie sie nicht einmal alle unter /src/assets ablegen: Sie können die Dateistruktur basierend auf der Modul-/Komponentennutzung organisieren. Sie können beispielsweise jede Komponente und ihre statischen Ressourcen in einem eigenen Verzeichnis ablegen.

Ressourcenhandhabungsregeln

Relative URLs, z. B. ./assets/logo.png, werden als Modulabhängigkeit interpretiert. Sie werden durch eine automatisch generierte URL ersetzt, die auf Ihrer Webpack-Ausgabekonfiguration basiert. URLs ohne Präfix, z. B. „assets/logo.png“ werden als relative URLs behandelt und in „./assets/logo.png“ umgewandelt. URLs mit dem Präfix „~“ werden als Modulanfragen behandelt, ähnlich wie „require(“ module/image.png‘). Verwenden Sie dieses Präfix, wenn Sie die Modulverarbeitungskonfiguration von Webpack nutzen möchten. Wenn Sie beispielsweise eine Pfadauflösung für Assets haben, müssen Sie 2aee3c5bbfa6ccdf4fd14f787793fd55 verwenden, um sicherzustellen, dass die Auflösung korrekt ist. URLs relativ zum Stammverzeichnis, z. B. /assets/logo.png, werden nicht verarbeitet

Rufen Sie den Ressourcenpfad in Javascript ab

Damit Webpack das zurückgeben kann korrekt Für den Ressourcenpfad müssen Sie require('./relative/path/to/file.jpg') verwenden, das vom Dateilader analysiert wird und dann die verarbeitete URL zurückgegeben wird. Zum Beispiel:

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

Beachten Sie, dass im obigen Beispiel alle Bilder unter dem Pfad ./bgs/ in den endgültigen Build einbezogen werden. Dies liegt an Webpack Ich kann nicht erraten, welche davon zur Laufzeit verwendet werden, daher werden alle einbezogen.

„Echte“ statische Ressourcen

Zum Vergleich: Dateien unter static/ werden von Webpack nicht verarbeitet: Sie verwenden denselben Dateinamen und werden direkt kopiert zum endgültigen Weg. Sie müssen absolute Pfade verwenden, um auf diese Dateien zu verweisen, abhängig von build.assetsPublicPath und build.assetsSubDirectory, die in config.js hinzugefügt wurden.

Der folgende Standardwert lautet beispielsweise:

// config/index.js
module.exports = {
 // ...
 build: {
  assetsPublicPath: '/',
  assetsSubDirectory: 'static'
 }
}

Alle im Verzeichnis static/ abgelegten Dateien sollten absolute URLs verwenden, auf die durch /static verwiesen wird /[Dateiname]. Wenn Sie den Wert von assetSubDirectory in Assets ändern, werden diese URLs zu /assets/[Dateiname]

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird .

Verwandte Artikel:

Mit Ajax Seiteninhalt und Adressleisten-URL ohne Aktualisierung ändern

JavaScript basierend auf Ajax Refresh um den Dateiinhalt dynamisch auf der Webseite anzuzeigen

AJAX-Verarbeitungsmethode für vom Server zurückgegebenes XML

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Unterschieds zwischen vue2.0-Ressourcendateien und statischen Assets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!