背景

vue線上的項(xiàng)目修改打包，重新部署后，線上出現(xiàn)了白屏，無法顯示

原因

這是因?yàn)闉g覽器緩存了之前的html，用戶訪問的還是之前的html，但是由于我們重新打包更新了服務(wù)器的資源，那么之前的html上引用的資源已經(jīng)不存在了，所以頁面就無法顯示出來了。

解決思路

1. 手動(dòng)刷新。懂的都都懂，用戶自己看到屏幕白茫茫一片，肯定以為網(wǎng)絡(luò)不好，多刷新幾次就出來了。

2. 在html加上 no-cache 等等 meta標(biāo)簽，然后服務(wù)器ngix也加傷 no-cache 等不緩存的代碼，網(wǎng)上搜一搜：vue打包緩存白屏，會(huì)有好多，這里就不多說了，主要是我加了這些東西后跟沒加的效果一樣，并不能解決，還有可能是項(xiàng)目是放在別人的cdn上，改不了服務(wù)器，可能也不會(huì)起作用。

3. 代碼刷新。通過測試我們可以看到，當(dāng)出現(xiàn)白屏?xí)r，刷新可以使頁面恢復(fù)正常，那是刷新時(shí)繞過了緩存，有興趣的朋友可以去了解這方面的知識。所以，我們只需要在資源加載出錯(cuò)的時(shí)候讓頁面重新刷新，那么問題就可以解決了。

代碼刷新處理方法

1. 監(jiān)聽資源加載。在頁面加載完成時(shí)，使用window自帶方法，監(jiān)聽資源加載失敗error時(shí)，查找失敗的資源是否是我們vue項(xiàng)目的資源，只要匹配一個(gè)即可通知我們調(diào)用刷新頁面的方法。

汗顏，我是想監(jiān)聽失敗的js、css，奈何一直無法監(jiān)聽到，所以放棄了，有成功的朋友可以交流交流。

2. 在項(xiàng)目main.js內(nèi)定義一個(gè)全局變量

window.my_isLoad = 1

然后我們在index.html內(nèi)寫上監(jiān)聽的方法，此處需注意，如果使用window.onload，那要確保你項(xiàng)目其他地方?jīng)]有使用這個(gè)方法，不然會(huì)失效，因?yàn)閣indow.onload只能執(zhí)行一次，多個(gè)時(shí)只執(zhí)行最后一個(gè)。

或者引入jquery，使用jquery的ready方法，該方法可以多次調(diào)用，并且執(zhí)行的時(shí)間節(jié)點(diǎn)比onload靠前，節(jié)省時(shí)間

先在index.html引入jquery

$(document).ready(
? ? ? ? function(){
? ? ? ? ? if(!window.my_isLoad) {
? ? ? ? ? ? // 這里可供自己測試查看，上線時(shí)可去掉，或自己做替他交互也可以，比如在頁面上給什么提示信息、按鈕
? ? ? ? ? ? var paydiv = document.createElement('div')
? ? ? ? ? ? ? ? paydiv.innerHTML = '資源加載失敗，我要刷新了'
? ? ? ? ? ? ? ? document.body.appendChild(paydiv)
? ? ? ? ? ? //?
? ? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? ? document.body.removeChild(paydiv)
? ? ? ? ? ? ? window.location.reload(true)
? ? ? ? ? ? },10000)
? ? ? ? ? ? // 這個(gè)延遲時(shí)間可自己控制，頁面加載出錯(cuò)多久后刷新頁面
? ? ? ? ? }
? ? ? ? }
? ? ? )

上面使用的是通過在main.js內(nèi)新增變量去判斷，由于我司的頁面有很多嵌入app的混合項(xiàng)目，在某個(gè)ios內(nèi)出現(xiàn)了刷新頁面時(shí)，緩存了之前window的變量，導(dǎo)致判斷不準(zhǔn)確，所以又想了一個(gè)不使用window變量的方法。

思路就是在App.vue 內(nèi)創(chuàng)建一個(gè)元素，然后同樣在index.html判斷頁面是否存在這個(gè)元素

在mounted生命周期里執(zhí)行這個(gè)方法，添加一個(gè)元素，我們在index.html內(nèi)通過id判斷這個(gè)元素

this.$nextTick(()=>{
? ? ? (function(){
? ? ? ? var appDom = document.getElementById('app') ? ? //這里的app是我們vue項(xiàng)目的app
? ? ? ? var checkDom = document.createElement('span')
? ? ? ? checkDom.setAttribute('id', 'my-check-load-dom') ? //這里的id是我們需要判斷的
? ? ? ? checkDom.style.display = 'none'
? ? ? ? appDom.appendChild(checkDom)
? ? ? })()
? ? })

$(document).ready(
? ? ? ? function(){
? ? ? ? ? var myLoadDom = document.getElementById('my-check-load-dom')
? ? ? ? ? if(!myLoadDom) {
? ? ? ? ? ? var paydiv = document.createElement('div')
? ? ? ? ? ? ? ? paydiv.innerHTML = '資源加載失敗，我要刷新了'
? ? ? ? ? ? ? ? document.body.appendChild(paydiv)
? ? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? ? document.body.removeChild(paydiv)
? ? ? ? ? ? ? window.location.reload(true)
? ? ? ? ? ? },10000)
? ? ? ? ? }
? ? ? ? }
? ? ? )

至此，在資源加載時(shí)候，頁面可以自動(dòng)刷新，從而答案重新獲取資源，解決白屏的問題。

若是嵌入app的混合項(xiàng)目，需要app的webview支持我們?yōu)g覽器的刷新方法，這點(diǎn)可以自己去測試，若不支持的話，可以去跟公司的app大佬溝通，有些webview默認(rèn)不支持，需要他們寫方法支持。 

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論