[Vue.js] ChunkLoadError 청크에러

 

VUE 프로젝트 진행중 build 후 배포하고 나서 잘 동작되는걸 확인했다.

그런데.

이후 또 배포를 하게되면 다른페이지로 클릭을해도 안넘어가고

콘솔로그에는 위와같은 청크에러가 난다..

(새로고침하면 잘 동작한다)

명확한 이유는 모르겠으나 

build 할때 이전배포와 다른이름으로 js 파일들이 번들링 되다보니 

신규 배포후에 남아있는 세션은 이전 배포버전 js를 호출하다 보니 나는 에러인것같다.

그리하여 열심히 구글링을 하여서 나온 결론.

청크 에러가 날때 라우터를 통해서 페이지 새로고침을 시켜주는것이다.

router.onError(error =>{    

    if (/loading chunk \d* failed./i.test(error.message) && navigator.onLine) {
        window.location.reload()
    }

}); // onError

vue router 에 위의 코드를 넣어서 배포를 진행하였다~

 

 

참고 :
https://blog.francium.tech/vue-lazy-routes-loading-chunk-failed-9ee407bbd58 

Vue Lazy Routes & loading chunk failed

하 지 만 
위 방법으로도 해결은 안되었다..

상단 사진의 청크에러는 사라졌지만 새로고침이 안되고

라우터이동은 계속 안되며.. 신택스 에러는 계속떳다..
if 안의 조건이 안걸리는듯 하다

 

router.onError(error => {
	console.log(error)
	if (
		error.message.indexOf('Loading chunk') >= 0 &&
		error.message.indexOf('failed') >= 0
	) {
		window.location.reload();
	}
});

 

로 소스 수정 해서 해결.