Assets und statische Anwendungsfallanalyse

Dieses Mal werde ich die Anwendungsfälle von Assets und Statik analysieren. Was sind die Vorsichtsmaßnahmen für die Verwendung von Assets und Statik? Das Folgende ist ein praktischer Fall.

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 Gedanken über die Bereitstellung machen zu müssen. Da diese Ressourcen zur Build-Zeit eingebunden/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. Beispielsweise können Sie 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. Beispiel:

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

Beachten Sie, dass im obigen Beispiel der endgültige Build alle Bilder im ./bgs/-Pfad enthält. Dies liegt daran, dass Webpack nicht erraten kann, welches davon zur Laufzeit verwendet wird Es wird All-inclusive sein.

Zum Vergleich: Dateien unter static/ werden von Webpack nicht verarbeitet: Sie verwenden denselben Dateinamen und werden direkt nach final kopiert 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.

Zum Beispiel lautet der Standardwert unten:

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

Alle im Verzeichnis static/ abgelegten Dateien sollten mit der absoluten URL /static/[Dateiname] referenziert werden. Wenn Sie den Wert von assetSubDirectory in „assets“ ändern, werden diese URLs in „/assets/[Dateiname]“ geändert.

Ich glaube, Sie beherrschen die Methode, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie hier Achten Sie auf andere php-bezogene chinesische Websites!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonAssets und statische Anwendungsfallanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!