[Vue] 라우터 히스토리 모드 사용시 서버 설정(feat. firebase)

Vue Router 사용 시에 해시모드와 히스토리모드 두 가지 설정이 가능하다. 

디폴트는 해시모드 이고 url에 /#/이 붙는다. 

히스토리 모드로 설정시에 url이 정상적으로 출력되지만 사용자가 직접 url을 입력하여 접근하면 404 오류가 발생한다.

이를 해결하기 위해서 서버에 포괄적인 대체 경로(index.html)을 추가하면 된다.

 

현재 프로젝트의 서버 구성이 완료되지 않아서 본인이 firebase를 통해 임시로 프론트개발 상황을 확인하고 있다.

firebase에 배포시 firebase.json에 다음과 같은 코드를 추가하면 된다.

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

추가로 router.js 안에 등록되어 있지 않은 라우터 주소로 접근할 경우 redirect 할 페이지를 등록해주어야 한다.

 

예시)

  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/Error404.vue')
  }