どんな問題？
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 しなくなりました。
参考にした記事