vue項目打包后由于html被緩存導致出現白屏如何處理

這篇文章主要講解了“vue項目打包后由于html被緩存導致出現白屏如何處理”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue項目打包后由于html被緩存導致出現白屏如何處理”吧！

背景

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

原因

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

解決思路

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

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

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

代碼刷新處理方法

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

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

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

window.my_isLoad = 1

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

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

先在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內出現了刷新頁面時，緩存了之前window的變量，導致判斷不準確，所以又想了一個不使用window變量的方法。

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

在mounted生命周期里執行這個方法，添加一個元素，我們在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)
          }
        }
      )

感謝各位的閱讀，以上就是“vue項目打包后由于html被緩存導致出現白屏如何處理”的內容了，經過本文的學習后，相信大家對vue項目打包后由于html被緩存導致出現白屏如何處理這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！