More than 5 years have passed since last update.

【備忘録】Vue.jsをNetlifyにホスティングするときのリダイレクト設定

Posted at 2019-06-26

※自分用。SPA勉強中の初心者。

経緯

vue.jsでのフロント側でのルーティング設定で、vue-routerを用いていたが、Netlifyにデプロイして、トップ以外のページのURLを叩いた時に404になってしまい、困ったので調べた。

公式に書いてあった。

サーバーの設定例 にあるように、設定ファイル等ケースにより対応が必要らしい。

Redirects | Netlifyをみると、_redirects というファイルをindex.htmlと同階層に設置すればいいらしい。

_redirects

/* /index.html 200

上記で問題なく、想定通りのルーティングで動作を確認した。

また、静的ファイル置き場の public ディレクトリの中に_redirectsを入れておくことで、デプロイ時の自動ビルドでも問題なくそのまま吐き出されていた。