지금까지 Vue Router를 통해 주소마다 컴포넌트를 연결하여 특정 페이지가 보일 수 있도록 했었습니다. 근데 정작 그 주소로 들어갈 수가 없다니…이해할 수가 없으실 겁니다. 사실 이것은 Vue가 Single Page Application이기 때문에 발생하는 문제입니다.
Single Page Application
이전에 특정 주소를 요청하면 해당 리소스 위치에 있는 index.html 파일을 가져온다고 했었습니다.
하지만 Vue의 경우 Vue가 연결된 index.html을 전달 받아 주소가 바뀌면 Vue를 이용해 페이지를 자체적으로 바꿉니다.
즉, 서버는 하나의 index.html만 가지고 있습니다. 하나의 페이지만 가지고 있다 해서 이를 Single Page Application이라 부릅니다.
redirect 하기
이를 해결하려면 배포하는 사이트마다 해결책이 각각 있는데 Netlify의 경우 public 폴더 안에 _redirects 파일을 하나만 추가하면 됩니다. 내용도 간단합니다.
plain text
public/_redirects
쉽게 말해 모든 경로를 /index.html로 리다이렉트 한다는 내용입니다. 다시 배포해보면 잘 동작하는 것을 볼 수 있습니다.
loading
이제 다른 사람에게 우리 페이지를 링크로 공유할 수 있게 되었습니다!
