Vite 프로젝트를 GitHub Pages에 배포했을 때 빈 화면이 뜨는 에러

Vite 프로젝트를 GitHub Pages에 배포했을 때 빈 화면이 뜨는 에러

 

Vite + React + TypeScript로 프로젝트를 진행하던 중 오류가 발생했다.

배포 스크립트를 추가하고 push 했는데 build, deploy 모두 success로 표시되지만 페이지에 빈 화면만 떴다.

Actions 탭에 들어가 Artifacts를 다운로드 받아 확인해 봄으로써 문제 원인을 파악할 수 있었다.

(Artifacts : 런타임 동안 만들어진 파일들)

script 태그의 src 경로와 link 태그의 href 경로가 절대 경로로 표시되어 있다.

해결 방법은 간단하다.

vite.config.ts 파일에서 base: ''를 추가해주면 된다.

그러면 이렇게 상대 경로를 참조하는 것을 확인할 수 있다.

vite config에서 base를 설정하지 않으면 디폴트로 '/'이 지정되기 때문에 생기는 오류이다.

간단한 에러 핸들링 기록 끝!

---

References

https://stackoverflow.com/questions/69744253/vite-build-always-using-static-paths

https://vitejs.dev/config/shared-options.html#base