[firebase] vue프로젝트를 SPA 방식으로 이동하는데 새로고침시 404 error 뜰때 (파이어베이스 vue router설정해주기)

상황

vue router 설정도 잘 해줬고, history설정도 해줬음.
SPA방식으로 (router-link) 페이지를 이동한 후 새로고침을 하면 로컬에서는 잘 되다가 배포 후에 404 에러가 뜸

 

해결

firebase.json 파일을 수정해주면된다. rewrites 부분 추가 !!

{
  "hosting": {
    "public": "dist",
    "rewrites": [
        {
            "source": "**",
            "destination": "/index.html"
        }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

spa방식은 index.html에서 모든 처리를 해주게 되어있는데, router-link로 이동을 하면 url뒤에 붙는 파라미터로 페이지를 구분하여 보여주기때문에 이슈가 없지만, /map 이 붙은상태로 새로고침을 하게되면 index.html에서 벗어나 map.html으로 이동하게 된다. 따라서 firebase에서 모든 곳을 index.html을 바라보도록 설정해주니 이슈가 해결되었다.