vue2首次加載屏幕閃爍問題

更新時間：2025年01月16日 08:54:56 作者：程琬清君

這篇文章詳細介紹了Vue.js項目的基本結構和執(zhí)行流程,包括index.html、main.js、App.vue和路由配置的關系,特別強調了在index.html中設置BASE_URL和cdn的使用,以及在main.js中使用render函數(shù)來減少打包體積

vue2首次加載屏幕閃爍

先看我的bug動圖：

我想要的動圖：

可能圖片不明顯反正就是只要這個正在加載資源這個頁面

1.了解vue項目執(zhí)行流程

vue項目中影響組件渲染和掛載有這幾個文件：index.html、main.js、App.vue、路由配置，那么它們之間的關系是如何呢？

答：

1.index.html是項目入口
2.main.js是入口文件（值得關注的是main.js的render函數(shù),下面會詳細的講）
3.App.vue根組件
4.路由配置(作用是：將路由名字和組件映射并渲染到App.vue)

執(zhí)行順序：index.html、main.js、App.vue、路由配置index.js、具體vue組件

index.html

①想要項目打包體積小，我們經常將第三方庫的cdn寫在index.html，比如（需要先將cdn下載到項目里）：

<head> 
<link rel="stylesheet" href="<%= BASE_URL %>cdn/element-ui/2.15.12/theme-chalk/index.css" rel="external nofollow" >
</head>

有人可能會問BASE_URL是什么？答：這個BASE_URL是根據(jù)vue.config.js的publicPath去設置的路徑，這個路徑決定了我們的前端項目打包后獲取靜態(tài)資源的默認的根路徑。

②body標簽里的<noscript></noscript>里寫如果沒有js支持時，將寫的的代碼。
③重點??！body標簽里的<div id="app"></div>里面寫的是：當vue實例還沒有完成掛載時，vue項目將顯示什么內容。

列取一段代碼：

<body>
  <div id="app">
     <div class="avue-home">
    <div class="avue-home__main">
      <img class="avue-home__loading" src="<%= BASE_URL %>svg/loading-spin.svg" alt="loading">
      <div class="avue-home__title">
        正在加載資源
      </div>
      <div class="avue-home__sub-title d">
        初次加載資源可能需要較多時間 請耐心等待
      </div>
    </div>
  </div>
  </div>
 
</body>

④那跟<div id="app"><div>同級的標簽還會顯示嗎？答：會！因為在vue實例還沒有掛載時，會運行index.html整個文件。
⑤js也就是<script>標簽最好寫在</body>之上，比如：

簡寫代碼：

<body>
  <div id="app">
  </div>
<script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
</body>

main.js

①我們最應該也重點注意到這段代碼：

var vue = new Vue({
  router,
  render: h => h(App),
  beforeCreate() { } // 一般不寫生命周期,這里我只是列出來告訴你們--->這里是vue實例，所以什么生命周期，data統(tǒng)統(tǒng)可以寫

}).$mount('#app')

1.render是重點：請務必注意它必須要有返回值。為什么是render?

答：請看這2句代碼

import Vue from 'vue';
import App from './App';

（1）vue.js才是完整版的vue，包含了：核心功能 + 模板解析器，它在

（2）vue.runtime.xxx.js是運行版的vue，只包含了：核心功能，沒有模板解析器。

完整的vue你可以看node_modules下的vue文件，如下圖

因為我們項目里用的是殘缺的vue.js，是一個不會解析template標簽的vue.js，引用render是為了減少打包的文件大小、使打包文件不會出現(xiàn)沒有用處的模板解析器。

2.項目中出現(xiàn)白屏閃爍的原因以及解決方式

原因：可以根據(jù)上面的vue項目執(zhí)行的流程可得，vue實例中的組件的模板內容（即app.vue）取代了index.html的<div id="app"></div>里的內容，在這個瞬間出現(xiàn)的白屏閃爍。

我看了網上很多人說v-cloak但我試了沒用，以下是我的處理方式，效果是達到了，可能還不夠很好，如果有大佬有更好的辦法請在此條文章下評論大家一起探討。

1.我原本的代碼：

index.html 
<div id="app">
 <div class="avue-home">
    <div class="avue-home__main">
      <img class="avue-home__loading" src="<%= BASE_URL %>svg/loading-spin.svg" alt="loading">
      <div class="avue-home__title">
        正在加載資源
      </div>
      <div class="avue-home__sub-title d">
        初次加載資源可能需要較多時間 請耐心等待
      </div>
    </div>
  </div>
  </div>

2.我修改后的代碼

index.html文件里（你沒看錯，我將我要展示的內容寫到了<div id="app">同級的地方）：

 <div id="app">
  </div>
  <div class="avue-home">
    <div class="avue-home__main">
      <img class="avue-home__loading" src="<%= BASE_URL %>svg/loading-spin.svg" alt="loading">
      <div class="avue-home__title">
        正在加載資源
      </div>
      <div class="avue-home__sub-title d">
        初次加載資源可能需要較多時間 請耐心等待
      </div>
    </div>
  </div>

并在index.html文件里寫上avue-home的樣式，我的樣式是（供參考）：

.avue-home {
      background-color: #303133;
      height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
    }

接下來是重點了：

我們都知道最后是app.vue的代碼替換了<div id='app'>，所以在app.vue文件里寫：

app.vue

mounted () {
// 當app.vue掛載完畢時，讓瀏覽器延遲1s自動刪除class為.avue-home的這個節(jié)點（有點繞，但可以好好想想）
    const avueHome = document.querySelector('.avue-home') // 獲取到這個class的節(jié)點
    setTimeout(() => {
      avueHome.parentNode.removeChild(avueHome) // 該節(jié)點的父級去刪除這個class
    }, 1000)

  },

希望大家細品這兩句代碼。