문제 정의

GET https://guesung.github.io/assets/index-TKSZQ3_x.css net::ERR_ABORTED 404 (Not Found)

image.png

해결 방법

: vite.config.js > base 옵션 설정해 해결

/** @type {import('vite').UserConfig} */
export default {
  base: './',
};

원인 탐색

  1. 왜 vite.config.js의 base옵션이 없을 때는 파일를 찾지 못한 것일까?

    : 경로 문제

    vite.config.js의 base를 설정하지 않았을 때 기본값은 /이다.

    그런데 상대 경로인 ./로 수정을 하니 해결이 되었다. 경로가 문제였던 것이다.

    위 에러 화면을 살펴보면, guesung.github.io/assets에서 파일을 찾고 있다. 그런데 현재 내가 배포하려는 사이트는 guesung.github.io/javascript-lotto이다. 그렇기에 assets폴더를 못찾을 수밖에 없는 것이다.

    vite.config.js에서 base로 ./를 설정한 후, 네트워크창을 확인해보자.

    image.png

    guesung.github.io/javascript-lotto에서 정상적으로 파일을 불러오고 있음을 확인할 수 있다.