Nuxt.jsのSPAモードでビルドしたアプリケーションをリロードすると404エラーになってしまう

先日、FireKPTというKPTツールを公開してみました。
これはNuxt.js + Firebaseで構築していて、SPAモードでビルドしてS3でホスティングする、という構成になっています。

公開してみたところ、開発環境では発生しない不可解なバグが1つ見つかって、しばらく放置していたのですがいい加減と思って腰を上げて調べてみた次第です。

---

原因はよくよく考えてみれば単純で、
SPAモードでビルドすると全てのページの静的なHTMLを生成するので、_id.vueのような動的にルーティングしているページは生成されないのでした。だから404なんですねー。
公式のリファレンスにもしっかり書いてありました。

警告: generate コマンドでは 動的なルーティング は無視されます。

Nuxt - ルーティング

ということで、ルーティングの構成を少し変えました。
動的ルーティングをやめ、データ抽出用のkeyはqueryパラメータに含めるように変更しました。

this.$router.push({path: "/boards/" + key });

pages
├── boards
│   └── _key.vue
└── index.vue

↓

this.$router.push({path: "/board", query: {id: key } });

pages
├── board.vue
└── index.vue

結果、URLは以下のように変わりました。

http://localhost:3000/boards/-L3a7FrVv5IK6PgjEKCG
↓
http://localhost:3000/board?id=-L9o_BQpgfASLhHd2pwR

データベースのkeyがそのままパラメータに含まれているのはREST的ではなくて落ち着かないですが、
問題はとりあえず解決できたので良しとしておきましょう。
ソースコードはこちらです。