vue 页面第一次载入或者刷新会出现一两秒的空白[vue启动秒白屏解决方案]

之前做过好几个项目vue都是pc端或者移动端网页上的，网站第一次打开都会出现白屏闪才进入应用，当然本身浏览器默认白色我们并不会在意这些细节，最近做到一个项目关于套壳app，把咋的vue项目套用的webview里，每次打开应用都会白屏下，那酸爽。次日老板在群里公开点名批评...有问题找前端是各岗位一致的共识....认真观察了下白屏产生的原理：原来是因为第一次进入时只有...

昌子玩前端

7439人浏览 · 2020-04-09 15:08:49

昌子玩前端 · 2020-04-09 15:08:49 发布

认真观察了下白屏产生的原理：原来是因为第一次进入时只有根目录默认的index.html资源啥的还未加载进来，尤其是弱网情况下。于是我们决定在index.html里做些什么...

1.在头部head里加入

<meta name="theme-color" content="#161d24" />

<style>
  #splash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* background: #161D24 url(./splash.c106a.png) no-repeat center; */
    background-size: 80%;
    background-color: #161D24;
    background-repeat: no-repeat;
    background-position: center;
  }

</style>

2.body：在<div id="app"></div>前面加入<div id="splash"></div>，script里的是我自己根据项目中英文去加入默认背景图可不理

<body>
  <!-- 核心 --> 
  <div id="splash"></div>

  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script type="text/javascript">
    (function () {
      // open web debugger console
      if (typeof VConsole !== 'undefined') {
        window.vConsole = new VConsole();
      }

      function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if (r != null) return unescape(r[2]); return null;
      }
      var lan = GetQueryString("lang") || "z_ch"

      var splash = document.getElementById('splash');
      splash.style.display = 'block';
      // if (lan == "en") {
      //   splash.style.backgroundImage = "url(./static/images/splash.png)";
      // } else {
      //   splash.style.backgroundImage = "url(./static/images/splash-zh.png)";
      // }

    })();
  </script>
</body>

效果：

简单的小修改，就可以避免那该死的白屏了，简单拥有仿app启动页，还可以加入加载动画以假乱真....

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^