vue项目打包后部分图片加载失败问题总结

现象：
    vue项目打包后部分动态的背景图片加载失败，本地正常显示。

原因：
    1、vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64，转义之后的图片可以显示;
    2、加载不出来图片是因为图片比较大了，没有能被转成base64格式，生成的路径又不对;

解决方案：
    1、vue.config.js文件中添加如下配置，可以控制图片的转移规则。
        通过改变limit的值，配置图片格式转换的限制大小（limit改为“1”后，文件都不会再被转为base64格式了）。
 

    2、修改部署环境的资源加载路径：
publicPath: '../../'

补充：
    1、base64的目的主要是，为了减少http请求，转为base64以后小图片可以跟js同时被加载到浏览器，而不需要多次对服务器发出图片资源请求；
    2、如果大图片也均转码为base64，很容易造成存储base64的js文件过大，一方面会造成资源加载时间过长的白屏问题，另一方面也会给js解释器带来比较大的负担，这样反而起不到优化的作用，而且会影响体验。