Ausführliche Erläuterung von Beispielen für die Verwendung von Aliaspfaden zur Referenzierung statischer Bildadressen in Webpack+vue

Jeder kennt die Vorteile der Aliase von Webpack, aber in den Vorlagen von vue treten immer Probleme auf, wenn Aliase für Bildadressen verwendet werden. Lange Zeit dachte ich, dass es an Webpack liegt. In diesem Artikel wird hauptsächlich die Verwendung von Alias-Pfaden zum Verweisen auf statische Bildadressen in Webpack + Vue vorgestellt. Jetzt werde ich es mit Ihnen teilen und als Referenz angeben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es hilft allen.

alias: {
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}

<template>
 <img src="assets/images/logo.jpg" />
</template>
<script>
import &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(asset/images/bg.jpg)
}
</style>

Mit dem obigen Code werden Sie feststellen, dass nur die Einführung von style.css, Bildadresse und Der Hintergrund ist erfolgreich. Die Bildadresse wird nicht aufgelöst...

Nach mehreren Suchen, um den Grund zu finden (zu diesem Zeitpunkt werden Sie feststellen, dass Baidus Suche nach diesen technischen Inhalten wirklich ein Kämpfer im Müll ist) , und endlich den Grund gefunden ...

vue-html-loader und css-loader übersetzen Nicht-Root-URLs in relative Pfade. Um sie wie einen Modulpfad zu behandeln, stellen Sie ihr ~ voran

Fügen Sie einfach ein ~

vor dem Alias ​​hinzu. Der endgültige Code wird wie folgt geschrieben:

alias: {
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}

<template>
 <img src="~assets/images/logo.jpg" />
</template>
<script>
import &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(~asset/images/bg.jpg)
}
</style>

Es bedeutet: Teilen Sie dem Loader mit, dass es sich um ein Modul und nicht um einen relativen Pfad handelt

Hinweis: Nur die statische Dateiadresse in der Vorlage und die statische Dateiadresse in Der Stil muss hinzugefügt werden ~, im Skript ist der Alias ​​als das definiert, was geschrieben werden soll.
Zu diesem Zeitpunkt habe ich mehrere Monate lang mit dem Problem gekämpft und es schließlich gelöst...

Übrigens werde ich eine Liste der von mir verwendeten Aliase veröffentlichen:

alias: {
  'assets': path.resolve(__dirname, '../src/assets'),
  'src': path.resolve(__dirname, '../src'),
  '~api': path.resolve(__dirname, '../src/api'),
  '~components': path.resolve(__dirname, '../src/components'),
  '~pages': path.resolve(__dirname, '../src/pages'),
  '~router': path.resolve(__dirname, '../src/router'),
  '~store': path.resolve(__dirname, '../src/store'),
  '~utils': path.resolve(__dirname, '../src/utils')
}

Verwandte Empfehlungen:

PHP regulär Codebeispiel zum Abrufen aller Bildadressen auf der Seite

Regulärer Ausdruck zum Verarbeiten von Bildadressen und IMG-Tags Zusammenfassung und Teilen von Methoden

Anleitung Ersetzen Sie die Bildadresse (img src) in einer Zeichenfolge durch einen regulären JavaScript-Ausdruck

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Verwendung von Aliaspfaden zur Referenzierung statischer Bildadressen in Webpack+vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!