【Vue.js】ビルドしたサイトが404 Not Foundになってしまう。

Question

前提・実現したいこと

初めてVue-CLI、vue-router、Vuetify使い、WEBサイトの制作しています。
npm run build を行い、生成されたディレクトリを本番環境に設置したのですが、ルーティング設定をしているURLに直接アクセスしたり、リロードを行うと画面が表示されずに404 Not Foundになってしまいます。

試したこと

おそらく下記のサイト様と同じエラーだと思いますが、公式ドキュメントも参考にし、解決策のRewriteRuleを設定を行っても、依然としてエラーになってしまいます。

https://qiita.com/sskre/items/3e30eb5ead0db2a61652

他に原因があると思うのですが、手詰まり状態です。
何卒ご教示いただければ幸いです。

公式ドキュメントを参考に追加した.htaccess

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

Answer 1

本番環境をどこに置いているか分かりませんが。

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

こちらのページで解決するのではと思います。

Comments

[Takai999]

回答ありがとうございます。無事に実装できました。