vue 4

[Vue.js] ChunkLoadError 청크에러

VUE 프로젝트 진행중 build 후 배포하고 나서 잘 동작되는걸 확인했다. 그런데. 이후 또 배포를 하게되면 다른페이지로 클릭을해도 안넘어가고 콘솔로그에는 위와같은 청크에러가 난다.. (새로고침하면 잘 동작한다) 명확한 이유는 모르겠으나 build 할때 이전배포와 다른이름으로 js 파일들이 번들링 되다보니 신규 배포후에 남아있는 세션은 이전 배포버전 js를 호출하다 보니 나는 에러인것같다. 그리하여 열심히 구글링을 하여서 나온 결론. 청크 에러가 날때 라우터를 통해서 페이지 새로고침을 시켜주는것이다. router.onError(error =>{ if (/loading chunk \d* failed./i.test(error.message) && navigator.onLine) { window.locati..

Vue.js 2021.08.31

[Vue.js] 빌드시 js 파일 버저닝

배포를 위한 빌드시 수정한 js 파일이 캐시가 남아 변경이 안되는 경우가 발생하였다. (이러한 경우를 cache busting 이라고한다 맞나?) 구글링을 해본결과 다양한 방법중 webPack 을 이용한 js 버저닝 하는 방법이 있었다. vue.config.js 에서 아래와 같이 설정해주면 된다 module.exports = { configureWebpack: config => { if ( process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' ) { config.output.filename = 'js/[name].[hash].js'; config.output.chunkFilename = 'js/[name].[hash..

Vue.js 2021.08.31