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设置的值，那么就将图片转为base64的格式。如果超过设置的值，就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下。

具体到项目而言，也就是说超过10k的图片就会将路径改为static/img/'name'。那么为什么打包后的背景图片路径是访问不到的呢？首先这有一个前提，就是当前图片路径是根据css中的background-image来设置的，而打包后的css目录下只有压缩后的一个css文件，并不存在static目录，所以就产生了找不到图片的问题。

解决方案

• 将超过10k的图片使用img标签包裹，小于10k的图片使用css的属性来引用。

• 修改url-loader的limit值

  笔者就是使用此办法解决问题的，但是该方法有个缺陷就是增加的js的体积，因为base64转换的缺点就是增大图片原本的体积，造成加载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背景图打包之后访问路径错误问题