CSS 参照画像を vue+webpack にパッケージ化した後にリソース ファイルが見つからない問題を解決

ここで、CSS 参照画像がパッケージ化された後にリソース ファイルが見つからない問題を vue+webpack がどのように解決するかについての記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

vue を使用して、CSS を通じて画像リソースをパッケージ化し、参照します。

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

開発環境のホットアップデートの効果はこんな感じです

しかし、パッケージ化後のページではリソースが見つからないというエラーが報告されます。

CSSで画像を導入してパッケージ化した後、スタイルローダーが独自のpublicPathを設定できなかったので、ExtractTextPluginのCSSパスpublicPathを変更しました。

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

一度ビルドしたらエラーも出ず正常に表示されました！

上記は私があなたのためにまとめたものです。

関連記事:

Vueが以下の表で配列を変更するとページがレンダリングされない問題を解決

Vue.jsは画像のランダムなドラッグ方法を実装

Vueが変更する問題を解決以下の表とページを介して配列がレンダリングされない問題

以上がCSS 参照画像を vue+webpack にパッケージ化した後にリソース ファイルが見つからない問題を解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。