VueRouter historyモードで 404 問題

環境

macOS, yarn, vue.js, VueRouter, firebase

あらまし

VueRouterのhistoryモードを指定するとアドレスから#が消えて綺麗になる。

しかし、直接リンクを指定してアクセスした時に404 のページが表示される。firebase uiのリダイレクトのように、意図してこれを行う時には困る。

firebase serveで動作を確認する際には以下のようにする。

firebase.json に"rewrites"~の部分を追記する。

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

参考資料

HTML5 History モード | Vue Router