どんな問題？

vue-router は SPA なので / 以外のページを直接叩きに行くと 404 する。

自分で nginx なんかでデプロイする場合は try_files /index.html とかで綺麗に解決するが、 GitHub Pages だとこの設定はできない（たぶん）。

普通に / 以外のページに行ったあと F5 するだけで 404 するのでけっこうキツい。

追記

GitHub Pages では SPA ではなくMPA にするほうがよさそう。

MPA にすれば複数 index.html ができるので以下の対策は必要ない。

対策方法

GitHub Pages は 404.html があると使ってくれるので、 404.html にスクリプトを仕込んでそこから /#/hoge/fuga/ へリダイレクトする（これで / がロードされる）。
/ 側では Vue が動く前に URL を /hoge/fuga/ へ書き換える。

実装例

public/404.html をいい感じに作って <head> の中に下を追加。

    <script>
      (function (l) {
        l.replace(l.origin + "/#" + l.pathname);
      })(window.location);
    </script>

次に、 public/index.html の <head> の中に下を追加。

    <script>
      (function (l) {
        if (l.hash) {
          window.history.replaceState(null, null, l.hash.slice(1));
        }
      })(window.location);
    </script>

window.location.replace は履歴を残さないので、戻るを押してもう一度リダイレクトされる心配はない。
window.history.replaceState はページ遷移せずに URL を書き換える。ここに replace を使うと無限ループするので注意。

さいごに

上の実装例だとステータスコードは 404 になってしまう。
~~実際 naca-nyan.github.io/converter/ とかを開いて Dev Tool を見ると 404 が出る。うーん。~~
~~もっといい実装あったら教えてください。~~
MPA にしたので Not Found しなくなりました。

参考にした記事