뷰로 개발중인 프로젝트의 라우터를 히스토리 모드로 바꿨더니 배포시 404가 발생하는 건에 대하여~

Vue router 공식문서
[다양한 히스토리 모드]https://router.vuejs.kr/guide/essentials/history-mode
[동적 라우트 매칭과 파라미터]https://router.vuejs.kr/guide/essentials/dynamic-matching

1. 문제

1) 해시가 보기 좋지 않음

vue의 라우터는 기본으로 해시라우터인데 주소 뒤에 #이 붙는다.
localhost:3000/# 처럼!

그리고 router.push 등으로 이동을 구현할때 localhost:3000/#/detail/ ... 같이 해시가 들어가는게 깔끔하게 보이지 않아 history mode(html5 mode)로 변경했는데

2) 404 오류

그렇게 변경하니 디테일 페이지로 이동하면 404 오류가 발생했다.

2. 해결

1) router/index.ts

createRouter({})안의 routes 배열에 다음과 같은 대체 설정을 해주었다.

{
            path: "/:(.*)*",
            component: HomeView,
},

그래도 안된당

2) vercel.json

dev에서 잘 실행되는거 보니까 vercel 배포 설정을 변경해야하는거 아닌가 싶어서
키워드를 vue router history vercel 이라고 검색하니
나와같이 404로 고생하시는 분들의 경험담이 쫙 보였다!

SPA는 vercel 배포시 설정을 해줘야한다고한다.
아래와 같이 routes 설정을 해주니(대체 url) 정상적으로 detail 페이지로 라우트 기능이 동작하는걸 확인했다!

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

나중에 또 이런일이 발생할 수 있으니 열심히 메모!