vercel로 배포한 사이트 새로고침 시 404 에러 뜨는 문제 해결

삽질을 오랫동안 했다...
vite로 구축한 사이트를 vercel로 배포했는데,
index페이지가 아닌 다른 라우팅에서 새로고침할 때 404 에러가 뜨는 문제가 있었다.

여러 문서들을 찾아보니, 아래와 같은 코드를 vercel.json 파일에 넣으라는 말들이 있었는데 해결이 되지 않았었다...

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

문제는 vercel.json 파일의 위치!! 였다...

최상단(package.json파일과 같은 위치) 디렉토리에 vercel.json 파일을 만들고 저 내용을 넣어줘야 했었는데,
엄한 src 폴더 안에서 저러고 있었던 것...



+ 최상단 폴더에서 json 파일을 만드니까 아래와 같은 에러가 떴었는데...

failed to load module script: expected a javascript module script but the server responded with a mime type of "text/plain". strict mime type checking is enforced for module scripts per html spec.

이건 npm run vercel로 앱을 실행했을 때에만 보이는 에러였다.
(npm start로 켰을 땐 에러안남 + 배포했을 때도 에러 안남!)