Vue Routerを使ったサイトで404が発生

Vue Routerを使ったサイトで404が発生してしまった

Vue Routerを使ったサイトで、いきなり途中のURLにジャンプしたり、$router.push(‘/xxx’)した後の表示でF5（リロード）したりしたら、404になってしまった。
vue-cliで開発中は問題なかったのに、buildしてapacheに配備したら404になった。

Not Found
The requested URL /xxx was not found on this server.

Apache Server at www.yamacoco.com Port 80

解決方法

ちゃんと公式ドキュメントに書かれていた。

https://router.vuejs.org/ja/guide/essentials/history-mode.html#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A%E4%BE%8B

mod_rewriteで対応するなら

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

mod_dirが使えるのであれば

<IfModule mod_dir.c>
  FallbackResource /index.html
</IfModule>

まとめ

動かす前にドキュメントは読まなくてはいけない。

同じタグの記事

同じカテゴリの記事

Vue Routerを使ったサイトで404が発生してしまった

解決方法

mod_rewriteで対応するなら

mod_dirが使えるのであれば

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル