在vue项目中，文件打包后的在第一次访问时会出现较长的白屏等待时间，对于访问者来说非常不友好。
除了数据压缩，结构优化外，最简单的应该就是在FP（First Paint）设置一个loading动画，来更好的过渡这段尴尬时间。
<template>
? ? <div id="fv_loading" v-show="showfv">
? ? ? ? <div class="fv_loadingBorder2"><div class="fv_loadingBorder3"><div class="fv_loadingBorder"></div></div></div> ?
? ? ? ? <div class="fv_bounce">
? ? ? ? ? ? ? ? <span class="fv_letter"><br><br><br>C</span>
? ? ? ? ? ? ? ? <span class="fv_letter"><br><br><br>t</span>
? ? ? ? ? ? ? ? <span class="fv_letter"><br><br><br>r</span>
? ? ? ? ? ? ? ? <span class="fv_letter"><br><br><br>l</span>
? ? ? ? ? ? ? ? <span class="fv_letter"><br><br><br>C</span>
? ? ? ? ? ? ? ? <span class="fv_letter"><br><br><br>V</span>
? ? ? ? ? ? ? ? <span class="fv_letter"><br><br><br>e</span>
? ? ? ? ? ? ? ? <span class="fv_letter"><br><br><br>r</span>
? ? ? ? </div>
? ? ?</div>
? <div class="home" :style="getHomeHeight">
? ? <div class="home-hero-img" :class="{'home-hero-img-custom ': isHome}" id="home-hero-img">
? ? ? <img :src="getHeroImg" @load="swhcyx">
? ? </div>
? </div>
</template>? ? fv_loading为首页加载代码块，设置v-show=“showfv”，默认为true，当进入页面时便会自动加载loding动画 ? 给img标签加上load函数来控制showfv的值，这样当首页img加载完成后，执行load函数swhcyx（），将showfv的值置为false，loading动画display：none；主页也已经加载完毕。 ?
swhcyx(){
let _this = this ? _this.showfv= false
},
? 在mounted周期里面调用this.swhcyx() ? ?
?
首页加载loading，bgimg加载完成后loading ----display：none
在想要添加的界面中插入loading即可，或者注册为组件引用
在app.vue中引入则在所有界面中都有loading。
ps:不采用定时的方法是因为这样每次返回首页时就会加载loading，即使本地浏览器已经缓存网站。根据img是否load方法第一次加载图片会出现loading，此时浏览器已经缓存图片，再次进入首页几乎不会出现loading动画，有也是非常短。
这是我的解决方法，分享一下。可能解决不了你的问题但谢谢阅读！