vue 프로젝트가 패키징된 후 html이 캐시되어 흰색 화면 처리가 발생합니다.

배경: vue 라인의 프로젝트가 수정 및 패키징되었습니다.재배포 후 온라인에 흰색 화면이 표시되고 표시되지 않았습니다.

이유: 브라우저가 이전 html을 캐시하고 사용자가 여전히 이전 html을 방문하지만 서버의 리소스를 다시 패키지하고 업데이트했기 때문에 이전 html에서 참조한 리소스가 더 이상 존재하지 않으므로 페이지를 열 수 없습니다. 표시됩니다.

솔루션:

1. 수동 새로 고침 . 모두가 이해합니다.사용자가 흰색 화면을 볼 때 네트워크 상태가 좋지 않다고 생각해야하며 몇 번 더 새로 고침하면 나타납니다.

2. html에 no-cache 및 기타 메타 태그를 추가하면 서버 ngix도 no-cache 및 기타 비캐시 코드를 추가합니다.인터넷 검색: Vue는 흰색 화면을 압축하고 캐시합니다. 많을 것입니다. 여기서 더 말씀드리자면, 주된 이유는 이것들을 추가하지 않은 것과 같은 효과가 나고 해결할 수 없다는 것입니다. 변경할 수 없으며 작동하지 않을 수 있습니다.

3. 코드 새로고침 . 테스트를 통해 우리는 흰색 화면이 나타날 때 페이지를 새로고침하면 페이지를 정상으로 복원할 수 있다는 것을 알 수 있습니다. 따라서 리소스 로딩 오류가 발생할 때만 페이지를 새로고침하면 문제를 해결할 수 있습니다.

코드 새로 고침 처리 방법:

1. 리소스 로딩을 모니터링합니다. 페이지 로딩이 완료되면 창 자체 메서드를 사용하여 리소스 로딩 실패 오류를 모니터링하고 실패한 리소스가 vue 프로젝트의 리소스인지 확인하고 일치하는 한 메서드를 호출하도록 알려줍니다. 페이지를 새로고침합니다. 부끄럽고 실패한 js와 css도 모니터링 해보고 싶은데 모니터링이 안되서 포기했습니다 소통 잘하는 성공한 친구들도 있습니다.

2. 프로젝트 main.js에서 전역 변수를 정의합니다.

window.my_isLoad = 1

그런 다음 index.html에 모니터링 방법을 작성합니다. 여기에서 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에 변수를 추가하여 판단하는 것으로, 저희 회사 페이지는 앱에 임베딩된 혼합 프로젝트가 많기 때문에 특정 ios에서 페이지를 새로 고칠 때 이전 창의 변수를 캐싱하여 부정확한 판단을 하게 됩니다. 정확해서 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)
          }
        }
      )

지금까지 리소스가 로드되면 페이지가 자동으로 새로 고침되어 답변이 리소스를 검색하고 흰색 화면의 문제를 해결할 수 있습니다.

앱에 내장된 하이브리드 프로젝트라면 앱의 웹뷰가 우리 브라우저의 새로고침 방식을 지원해야 합니다. 기본적으로 지원하지 않으며 메서드 지원을 작성해야 합니다.