vue.jsで作成したサイトの第二階層以下に直接アクセスすると500 Internal Server Error

Question

vue-cli を使用しています。

npm run build でビルドされた ./dist 配下のファイルを heteml のレンタルサーバーにアップしました。

example.com/ から example.com/foo の遷移は問題ないのですが、 example.com/foo でリロードをすると 500 Internal Server Error が起こりました。（他のページも同様です）

ローカルで ./dist にて php サーバーを起動して同じ手順を試してみるとこちらは問題はありませんでした。

npm run dev でのローカル開発中も問題ありません。

vue に限らず、SPA におけるサーバーの設定などなにか必要なのでしょうか？

Comments

[euledge]

ローカルの環境で `npm run dev` 実行したときの状況はどうなのでしょうか？

[machine_machine]

ありがとうございます。その場合も問題なく動作しています。サーバーにアップしたときのみ発生します。

Answer 1

500 Internal Server Errorはサーバサイドのエラーです。

つまり、PHP側でリクエストを処理している最中に発生するエラーで、Vue側の問題ではありません。
ローカル環境とデプロイ先の環境が異なり、特定のURLにアクセスした際に落ちているのでしょう。

サーバ側でPHPのエラーログを出せるようであれば出して（PHPにあまり詳しくないので方法は分かりませんが）、
問題を切り分けていく必要があると思います。

なお、「遷移は問題ない」理由ですが、おそらくvue-routerを使っているためかと思います。vue-routerを使っている場合には遷移時にはリクエストは発生しません。遷移後のURLでリロードを行なう場合にはリクエストが発生するので、挙動が異なってしまうのだと推察します。