1、先解释一下这段配置代码的意思，test是正则匹配规则，匹配项目中所有的以正则规则结尾的格式的文件，然后通过url-loader进行处理，不大于10kb就会进行base64转码，就是将图片转为base65格式，如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下，也就是static/img/图片名，
2、注意相对路径标识’./’,我们知道img为html标签，他的路径是由index.html开始访问的，他走./static/img/'图片名'是能正确访问到图片的，所以img的路径没问题，然后app.css访问./static/img/'图片名'是访问错误的，因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。（这就是背景图片没有显示的原因）
3、解决方法：
检查config文件中的assetsPublicPath是否设置为’/’而不是’./’
注意区分’/’为绝对路径，绝对路径从网站静态服务器根目录查询/static/img/图片，这样的路径就是正确的，如果设置为’./’，路径就变成了相对路径，相对路径会根据相对的文件目录来确定文件资源，会造成上面分析的问题vue-cli创建的vue项目，会自带一个static目录，将出错图片放在该目录下面即可（正确解决办法）
查看vue-cli创建项目的webpack配置文件可以找到一个将static目录拷贝到dist目录中。根据对资源的规划不同，将需要打包的资源放在src/assets目录中，不需要打包的资源放入static目录中。背景图片的解决方法：background:url('../../assets/images/bg.png');被相对打包后变成了url('static/img/bg.png')所以我们必须保留css引用图片的正确路径即：url('../../static/img/bg.338948.png') 我们需要在build文件夹下的utils.js做一下修改
添加这一行代码即可。
关于base64
优点：base64就是一串字符串码来表示的图片，在加载页面或者js的时候就一并加载过来，减少图片引用时单独的一次http请求。了解web端性能优化的同学都知道，http请求每次建立都会占用一定的时间，对于小图请求来说，可能http建立请求的时间比图片下载本身还长。所以对小图进行base64转码是优化http请求，保证页面加速渲染的一种手段。
缺点：base64缺点就是之前提到的，他会增加图片本身的大小，对小图片来说，增加大小导致js的请求增长完全能弥补多一个http请求的建立的时长，这种取舍是划算的。可是对于大图来说，这样的取舍是不划算的。