最近在项目中用到了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背景图打包之后访问路径错误问题
