vue2.0-Ressourcendatei-Assets und statische Nutzungsanweisungen

Dieses Mal bringe ich Ihnen Anweisungen für die Verwendung von vue2.0-Ressourcendatei-Assets und Statik. Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue2.0-Ressourcendatei-Assets und Statik? . .

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 in und

Hintergrund: url(./logo.png), „./logo.png“ , sind alles relative Ressourcenpfade, die von Webpack in Modulabhängigkeiten analysiert werden.

Da logo.png kein

JavaScript ist, müssen wir, wenn es als Modulabhängigkeit betrachtet wird, URL-Loader und File-Loader für die Verarbeitung 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 Verwendung von Modulen/Komponenten 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“ konvertiert. URLs mit dem Präfix „~“ werden als Modulanfragen behandelt, ähnlich wie bei „require“.

('some-module/image.png') Sie können dieses Präfix verwenden, 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

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. 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.

„Echte“ statische Ressourcen

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:

JS dynamischer Betrieb von HTML-Tags

Detaillierte Erläuterung der Verwendung von React Router v4

Das obige ist der detaillierte Inhalt vonvue2.0-Ressourcendatei-Assets und statische Nutzungsanweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!