Url로 직접 접근시, 404 Return 문제

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

작성

2.4K

안녕하세요?

강의를 듣고 복습하던 중 발견한 골치아픈 문제가 있어서 질문드립니다.

Vue-Router를 이용하여 routing하였고, 페이지 내에서 클릭하고 들어가면 잘 동작하지만,

브라우저에서 새로고침 버튼을 누르거나, url을 직접 치고 들어가면 페이지를 찾을 수 없다는 에러가 반환됩니다.

실무에서는 종종 url로 직접 연동되는 page도 필요할텐데, 항상 root path로 일단 들어가서 click 등으로 다른 view로 이동해야 하는지 궁금합니다.

SPA의 한계로 인해, root path외에 다른 route는 url을 통한 직접 접근이 불가능한가요?

이런 문제를 어떻게 해결할 수 있는지 답변주심 매우 감사드리겠습니다!

답변 2

지식공유자

안녕하세요 🙂
로컬에서는 잘 동작이 되는데 특정 서버에 배포시 404 오류가 발생 되는거죠?

SPA 앱을 특정 서버에 배포하기 위해서는 추가적으로 설정이 필요합니다.
예를 들어 Vercel에 배포하기를 원한다면
루트 디렉터리에 vercel.json 파일을 만드신 후 아래 설정을 추가하시면 됩니다.

/vercel.json
{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

제 깃헙에 추가했으니 참고해보세요 ^^

다른 서버에 배포시에는 해당 서버 공식 홈페이지에서 설정 방법을 확인하셔야 합니다.

참고

질문자

아하 vue만으로 해결되는 문제가 아니었군요!

Tomcat 서버에 배포하려 할때는 vue.js 공식 guide는 없는것일까요? ㅠ

backend로 Spring boot, frontend로 vue.js를 사용하여 게시판 프로젝트를 하고 있었습니다 ㅜㅜ

지식공유자

아래 링크를 참고하시면 도움이 될것 같아요 🙂

질문자

감사합니다 ~! ^^

인프런 커뮤니티 질문&답변