快捷導(dǎo)航

vue2首次加載屏幕閃爍問(wèn)題

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

這篇文章詳細(xì)介紹了Vue.js項(xiàng)目的基本結(jié)構(gòu)和執(zhí)行流程,包括index.html、main.js、App.vue和路由配置的關(guān)系,特別強(qiáng)調(diào)了在index.html中設(shè)置BASE_URL和cdn的使用,以及在main.js中使用render函數(shù)來(lái)減少打包體積

vue2首次加載屏幕閃爍

先看我的bug動(dòng)圖：

我想要的動(dòng)圖：

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

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

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

答：

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

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

index.html

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

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

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

②body標(biāo)簽里的<noscript></noscript>里寫如果沒有js支持時(shí)，將寫的的代碼。
③重點(diǎn)??！body標(biāo)簽里的<div id="app"></div>里面寫的是：當(dāng)vue實(shí)例還沒有完成掛載時(shí)，vue項(xiàng)目將顯示什么內(nèi)容。

列取一段代碼：

<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">
        初次加載資源可能需要較多時(shí)間 請(qǐng)耐心等待
      </div>
    </div>
  </div>
  </div>
 
</body>

④那跟<div id="app"><div>同級(jí)的標(biāo)簽還會(huì)顯示嗎？答：會(huì)！因?yàn)樵趘ue實(shí)例還沒有掛載時(shí)，會(huì)運(yùn)行index.html整個(gè)文件。
⑤js也就是<script>標(biāo)簽最好寫在</body>之上，比如：

簡(jiǎn)寫代碼：

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

main.js

①我們最應(yīng)該也重點(diǎn)注意到這段代碼：

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

}).$mount('#app')

1.render是重點(diǎn)：請(qǐng)務(wù)必注意它必須要有返回值。為什么是render?

答：請(qǐng)看這2句代碼

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

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

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

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

因?yàn)槲覀冺?xiàng)目里用的是殘缺的vue.js，是一個(gè)不會(huì)解析template標(biāo)簽的vue.js，引用render是為了減少打包的文件大小、使打包文件不會(huì)出現(xiàn)沒有用處的模板解析器。

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

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

我看了網(wǎng)上很多人說(shuō)v-cloak但我試了沒用，以下是我的處理方式，效果是達(dá)到了，可能還不夠很好，如果有大佬有更好的辦法請(qǐng)?jiān)诖藯l文章下評(píng)論大家一起探討。

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">
        初次加載資源可能需要較多時(shí)間 請(qǐng)耐心等待
      </div>
    </div>
  </div>
  </div>

2.我修改后的代碼

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

 <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">
        初次加載資源可能需要較多時(shí)間 請(qǐng)耐心等待
      </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;
    }

接下來(lái)是重點(diǎn)了：

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

app.vue

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

  },

希望大家細(xì)品這兩句代碼。