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 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 verwenden, um sicherzustellen, dass die Auflösung korrekt ist. URLs relativ zum Stammverzeichnis, z. B. /assets/logo.png, werden nicht verarbeitet

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.

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:

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!