vue 打包之后图片不显示

问题描述：项目第一次上线并没出现这个错误，这次优化更新时，突然出现图片不显示，最开始一直纠结是不是自己哪里更改了。后来在大佬的提示之下，发现可能是vue的问题，百度之后发现，vue打包项目时，会根据图片的大小进行处理。在控制台你可以看到有些图片会出现这种样子，在后缀前面加了一字符串。(这种不能显示)

图片：bug1.png

实际能正常显示为如下两种方式所示:(图有点丑，请大家将就)

图片：bug2.png

图片：bug3.png

首先讲解一下：background：url（data：image/....）,为什么会显示成这样，这是因为vue利用webpack进行打包时，会把小于10000b的进行转码。这个代码你可以在build下面webpack.base.conf.js文件中发现，如下图

图片：111.png

以下提出三种解决方法，前两种治标不治本
第一种：把背景图片样式写成行内样式，解决这个问题
第二种：把options注释掉，或者limit修改大小，这样就可以把所有的都转码了
第三种：推荐使用，第一步打开config文件下面的index，修改assetsPublicPath,如下图

图片：222.png

第二步，build下的utils.js增加一句publicPath

图片：444.png

以上的操作是为了让路径回到根目录，你可以在打包以后看到不修改根目录之前图片路径是/static/img/xxxx.jpg
但实际打包我们的目录结构是 dist-staic-（css|img|js|main.css），图片在img文件夹里面按照目录关系，在css里面访问应该是../../static/img/xxx.jpg.这样就会使图片访问不到，所以在utils.js里面使其回到根目录。