빌드를 한 이후, npm run preview 명령으로는 페이지가 잘 보이는데 dist 내부의 index.html에 직접 접속할 경우 (live server로 켜 봄) 404 에러가 발생함

export default defineConfig({
  plugins: [react()],
  ...
  base: './',         // works, but can clash with createWebHistory
})

이런 식으로 vite.config.json에 옵션을 추가하니 스타일 정보는 추가가 됨

하지만 여전히 화면에 404 에러가 표시됨 (하지만 콘솔에는 아무것도 표시되지 않음 !!)

아이콘이 빌드파일에 포함되지 않는 것을 발견하여

publicDir: ‘./assets/’를 추가하고,

빌드파일에 아이콘도 함께 들어가는 것을 확인 완료

publicDir를 빼고,

cmd+shift+R을 브라우저에서 눌러서 캐시 지우기

시도했지만 실패

결론은

live server만 안된다

vercel에 올려본 결과, 클라우드 환경에서도 잘 동작함

궁금한 점…!!

왜 build를 한 후 npm run preview로는 실행이 잘 되지만 build 된 파일인 index.html 파일을 live server로 실행했을 때는 왜 실행이 안될까…. 브라우저 자체에서 허용을 안해준다고 하던데 잘 모르겠음…………………………..