Vueプロジェクトパッケージ時のピクチャパスエラー解決方法

最近プロジェクトでVueが使われていて、プロジェクトのパッケージ化中に背景画像の経路が間違っているという問題に遭遇し、グーグルを経て、構成時に画像の制限サイズが小さすぎることがわかりました.場所:

// build/webpck.base.conf.js
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  query: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

上記の構成のlimitデフォルト設定10000によるurl-loaderの処理ルールは、ファイルサイズがlimit設定の値を超えない場合、画像をbase 64のフォーマットに変換することです.設定値を超える場合はutilsに個別にパッケージする.assetsPath(‘img/[name].[hash:7].[ext])というディレクトリの下にあります.
具体的には、10 kを超える画像はstatic/img/'name'にパスを変更します.では、なぜパッケージ化された背景画像のパスにアクセスできないのでしょうか.まず、現在のピクチャパスはcssのbackground-imageに基づいて設定されているが、パッケージされたcssディレクトリの下には圧縮されたcssファイルが1つしかなく、staticディレクトリが存在しないため、ピクチャが見つからないという問題がある.
ソリューション

は、10 kを超えるピクチャをimgタグで包み、10 k未満のピクチャはcssの属性で参照する.

url-loaderのlimit値を修正筆者はこの方法を用いて問題を解決したが、base 64変換の欠点は画像の元の体積を増大させ、jsをロードする時間が長すぎて、損をしないという欠点がある.

絶対パスを使用してピクチャをロードするこの方法は、各ピクチャがhttpリクエストを行うため、より多くのピクチャの場合のシーンに適していない.だから一番いい案はやはり第一です.

2018-05-17更新:
ここで、limit値を変更することなく、画像がcssに移行してcssファイルが大きすぎるという問題を効果的に防止するより良い方法を見つけました.
解決策はgithub pspgbhuの回答を参照してください.
ビルの所有者の問題では、主にcssのpublicPathを個別に構成する必要があります.ExtractTextWebpackPluginはoptionsを提供する.publicPathのapiは、cssに対してpublicPathを個別に構成することができる.
vue-cliで生成されたプロジェクトの場合、distディレクトリ構造は次のとおりです.

dist
├── index.html
└── static
    ├── css
    ├── img
    └── js

よくある問題は、cssのbackground-imageの相対パスがimgフォルダに正しく参照されないことです.ただしExtractTextWebpackPluginのpublicPathで構成すればよい.
build/utilsを変更します.jsファイルのExtractTextPluginプラグインのoptions構成:

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         //         ，          
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

参考記事:Vueバックグラウンドマップのパッケージング後のアクセスパスエラーの問題について