Lösen Sie das Problem, dass Ressourcendateien nicht gefunden werden, nachdem CSS-referenzierte Bilder in vue+webpack gepackt wurden

Jetzt werde ich einen ausführlichen Artikel darüber teilen, wie vue+webpack das Problem löst, dass Ressourcendateien nach dem Packen von CSS-referenzierten Bildern nicht gefunden werden. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Verwenden Sie Vue, um Bildressourcen über CSS zu packen und zu referenzieren.

.img { 
  height: 500px; 
  width: 100%; 
  background: url("./assets/img/1.jpg") no-repeat; 
  background-size: 100%; 
 }

Der Effekt einer Hot-Aktualisierung der Entwicklungsumgebung ist wie folgt

Aber die Seite nach dem Verpacken Es wird ein Fehler gemeldet, dass die Ressource nicht gefunden werden kann.

Nachdem ich den Grund überprüft hatte, konnte der Style-Loader seinen eigenen publicPath nicht festlegen, nachdem CSS das Bild importiert und gepackt hatte. Daher habe ich den CSS-Pfad publicPath von ExtractTextPlugin geändert.

if (options.extract) { 
   return ExtractTextPlugin.extract({ 
    use: loaders, 
    // css 引用图片打包问题 
    publicPath: '../../../', 
    fallback: 'vue-style-loader' 
   }) 
  } else { 
   return ['vue-style-loader'].concat(loaders) 
  }

Nach einmaligem Aufbau wurde kein Fehler gemeldet und die Anzeige war normal!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Lösung des Problems, dass die Seite nicht gerendert wird, wenn Vue das Array über die folgende Tabelle ändert

Vue.js-Implementierung So ziehen Sie Bilder nach Belieben

Lösen Sie das Problem, dass Vue das Array mithilfe der folgenden Tabelle ändert und die Seite nicht gerendert wird

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem, dass Ressourcendateien nicht gefunden werden, nachdem CSS-referenzierte Bilder in vue+webpack gepackt wurden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!