背景

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

原因

這是因為瀏覽器緩存了之前的html，用戶訪問的還是之前的html，但是由于我們重新打包更新了服務器的資源，那么之前的html上引用的資源已經不存在了，所以頁面就無法顯示出來了。

解決思路

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

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

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

代碼刷新處理方法

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

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

2. 在項目main.js內定義一個全局變量

window.my_isLoad = 1

然后我們在index.html內寫上監(jiān)聽的方法，此處需注意，如果使用window.onload，那要確保你項目其他地方沒有使用這個方法，不然會失效，因為window.onload只能執(zhí)行一次，多個時只執(zhí)行最后一個。

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

先在index.html引入jquery

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

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

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

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

this.$nextTick(()=>{
? ? ? (function(){
? ? ? ? var appDom = document.getElementById('app') ? ? //這里的app是我們vue項目的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)
? ? ? ? ? }
? ? ? ? }
? ? ? )

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

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論