案例环境
通过vue-cli脚手架创建的vue项目
在项目打包的时候遇到了背景图片路径出错的问题，经过谷歌一番，发现是在配置的时候对图片的限制大小过小造成的
首先，出错点在url-loader上面。
// url-loader配置
// 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]')
}
这里解释一下上面这段url-loader配置，test是正则匹配规则，匹配项目中所有的以正则规则结尾的格式的文件，直白点就是所以的图片（png，jpg，jpeg，gif，svg）。然后用url-loader进行处理。处理也有个规则如下，当不大于10000B的文件进行base64转码，就是将图片转为base64的格式。如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]') 这个目录下（从build/utils.js和config/index.js可以知道这个路径就是static/img目录，并且图片名是进行hash之后的值，根目录下面没有static目录，所以会创建一个static目录，至于为什么最后没有看见这个目录后续再说）,当我们创建了一个这样的目录之后，所以的图片访问路径就成了对应的static/img/'图片名'。到这里就可以确定，如果小于10KB的图片转为base64，大于10KB的图片已经将图片路径改为了static/img/'图片名'，然后我们继续来理清访问路径的事情。
// 目前我们的目录结构
index.html
static
|--img
|--'picname'
|--css
|--app.css
|--js
|--app.js
我们知道img为html标签，他的路径是由index.html开始访问的，他走static/img/'图片名'是能正确访问到图片的，所以img的路径没问题，然后app.css访问static/img/'图片名'是访问错误的，因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。
解决办法
1、使用小图片作为背景图片（建议）：
将小于10KB的图片作为背景图片，如果有大于10KB的图片作为img图片。
2、修改url-loader的limit值（不建议）：
从上面分析可知，当图片转为base64就没有路径错误的问题，保证自己的背景图片都能转为base64就可以防止该错误发生,将limit的值改为你的背景图最大那一张的值还大一点就行，换算为B的单位
3、将css不要单独打包出来（不建议）：
直接通过css-loader和style-loader打包到js中，js自动创建style标签，这样，背景图片的访问路径就是通过index.html路径访问了，不过该解决方案也不建议。会导致js过大，和图片过大不建议转base64一个道理。
4、使用绝对路径的图片地址路径（建议）
建议：使用小图片作为背景图片，大图片用img标签。首先得分清背景图片和图片img的一些区别，就各人理解而言，背景图片是用来修饰网页的，与实际内容无关的东西，使用背景图片。如果与内容有关的东西都应该使用img标签算作网页结构的内容。修饰的图片尽量的小，也可以使用图片压缩等策略减小图片大小。