다양한 히스토리 모드
라우터 인스턴스를 생성할 때 사용하는 history 옵션을 통해 다양한 히스토리 모드 중에서 선택할 수 있습니다.
HTML5 모드
HTML5 모드는 createWebHistory()로 생성하며, 권장되는 모드입니다:
createWebHistory()를 사용할 때, URL은 "정상적으로" 보입니다. 예: https://example.com/user/id. 아름답죠!
하지만 여기서 문제가 발생합니다. 우리의 앱은 싱글 페이지 클라이언트 사이드 앱이기 때문에, 서버 설정이 제대로 되어 있지 않으면 사용자가 브라우저에서 https://example.com/user/id에 직접 접근할 경우 404 에러가 발생합니다. 보기 안 좋죠.
걱정하지 마세요: 이 문제를 해결하려면 서버에 간단한 catch-all 폴백 라우트를 추가하면 됩니다. URL이 정적 자산과 일치하지 않으면, 앱이 위치한 동일한 index.html 페이지를 제공해야 합니다. 다시 아름답게 해결됩니다!
해시 모드
해시 히스토리 모드는 createWebHashHistory()로 생성합니다:
이 모드는 실제 URL 앞에 해시 문자(#)를 사용하여 내부적으로 전달합니다. 이 URL의 해당 부분은 서버로 전송되지 않기 때문에, 서버 차원에서 특별한 처리가 필요하지 않습니다. 하지만 SEO에 좋지 않은 영향을 미칩니다. 만약 이것이 걱정된다면, HTML5 히스토리 모드를 사용하세요.
메모리 모드
메모리 히스토리 모드는 브라우저 환경을 가정하지 않으므로 URL과 상호작용하지 않으며 초기 내비게이션을 자동으로 트리거하지도 않습니다. 이로 인해 Node 환경과 SSR에 완벽하게 적합합니다. createMemoryHistory()로 생성하며, app.use(router) 호출 후 초기 내비게이션을 직접 푸시해야 합니다.
권장되지는 않지만, 이 모드를 브라우저 애플리케이션 내에서 사용할 수도 있습니다. 하지만 히스토리가 없으므로 뒤로 또는 앞으로 이동할 수 없다는 점에 유의하세요.
예시 서버 설정
참고: 아래 예시들은 앱을 루트 폴더에서 제공한다고 가정합니다. 하위 폴더에 배포하는 경우 Vue CLI의 publicPath 옵션과 관련된 base 라우터 속성을 사용해야 합니다. 또한 아래 예시에서 루트 폴더 대신 하위 폴더를 사용하도록 조정해야 합니다(예: RewriteBase /를 RewriteBase /name-of-your-subfolder/로 교체).
Apache
mod_rewrite 대신 FallbackResource를 사용할 수도 있습니다.
nginx
네이티브 Node.js
Node.js와 Express
Node.js/Express의 경우, connect-history-api-fallback 미들웨어 사용을 고려하세요.
인터넷 정보 서비스 (IIS)
- IIS UrlRewrite 설치
- 사이트의 루트 디렉터리에 다음과 같이
web.config파일 생성:
Caddy v2
Caddy v1
Firebase 호스팅
firebase.json에 다음을 추가하세요:
Netlify
배포 파일에 포함되는 _redirects 파일을 생성하세요:
vue-cli, nuxt, vite 프로젝트에서는 이 파일이 보통 static 또는 public 폴더에 위치합니다.
문법에 대한 자세한 내용은 Netlify 문서에서 확인할 수 있습니다. 또한 netlify.toml 파일 생성을 통해 _리디렉션_을 다른 Netlify 기능과 결합할 수도 있습니다.
Vercel
프로젝트의 루트 디렉터리에 다음과 같이 vercel.json 파일을 생성하세요:
주의사항
여기에는 주의할 점이 있습니다: 이제 서버는 더 이상 404 에러를 보고하지 않습니다. 모든 존재하지 않는 경로가 index.html 파일을 제공하게 되기 때문입니다. 이 문제를 해결하려면, Vue 앱 내에서 catch-all 라우트를 구현하여 404 페이지를 표시해야 합니다:
또는, Node.js 서버를 사용하는 경우, 서버 측에서 라우터를 사용하여 들어오는 URL을 매칭하고, 일치하는 라우트가 없으면 404로 응답하는 폴백을 구현할 수 있습니다. 자세한 내용은 Vue 서버 사이드 렌더링 문서를 참고하세요.