Pfad zu statischen Assets in der Anwendung vue.js

Question

Ich entwickle eine einzelne Seite Anwendung basierend auf der Vue-CLI-Webpack-Vorlage. Da wir auch statische Werte verwenden müssen, müssen wir sie in unserem Stylesheet referenzieren.

Die offizielle Dokumentation empfiehlt einen absoluten Pfad wie die folgenden zu verwenden:

background-image: url('/assets/images/lo/example2.svg'); 

Das Problem ist, dass statische Vermögenswerte werden von den vue-Lader und webpack selbst verarbeitet werden, so dass der Urls gewonnen wird im endgültigen Ausgabe-Stylesheet nicht richtig eingestellt. Alle Assets, die vom webpack url-loader verarbeitet werden, erhalten abhängig von Ihrer publicPath-Konfiguration die korrekte relative URL. Der gleiche Effekt ist für statische Assets erwünscht.

Haben Sie eine Idee, wie statische Elemente in Kombination mit einer vue.js-basierten Anwendung verwendet werden?

aktualisieren

Nach der Untersuchung und eine Menge von Versuch und Irrtum habe ich das letzte Sheet und das Skript Bündel innerhalb des Root-Ordner neben dem index.html platzieren entschieden. Die generierten Pfade funktionieren ordnungsgemäß. Nicht die optimale Lösung, da ich Unterordner für Skripte und Stylesheets bevorzuge (obwohl sie nur eine Datei enthalten). Trotzdem habe ich einen Build-Prozess, der konsistente und gültige Artefakte generiert.

Answer 1

Verwenden Sie für "echte" statische Assets das statische Verzeichnis.

Im Gegensatz dazu werden Dateien in static/von Webpack überhaupt nicht verarbeitet: Sie werden direkt mit dem gleichen Dateinamen an ihren endgültigen Bestimmungsort kopiert. Sie müssen auf diese Dateien mit absoluten Pfaden verweisen, die durch das Verbinden von build.assetsPublicPath und build.assetsSubDirectory in config.js festgelegt werden.

Sie können auch diese Standardpfad in Config überschrieben/index.js

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

Alle in statischen platzierten Datei/sollte mit der absoluten URL/static/[Dateiname] verwiesen werden. Wenn Sie das AssetSubDirectory in Assets ändern, müssen diese URLs in/assets/[Dateiname] geändert werden.