Vueをビルドして生成されたファイルを
本番環境に載せることが一般的だと思います。
SPAは、routerを使用して画面を書き換えているわけです。
ビルドして生成されたファイルは、index.htmlおよびassetのみですので
ファイルを置いた直下以外のパスにアクセスをすると、404エラーになるわけです。
その対処法として、htaccessを使用します。
今回は、htaccessを使用してビルド後、本番環境でリロードすると404エラーを解決します。
※htaccessは、Apacheの設定ファイルです。
対処法
.htaccessファイルの作成
では、.htaccessファイルを作成します。
ビルドして生成されたファイルと同じ階層に作成します。
.htaccessに記述
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
このように設定することにより、フォルダやファイルが存在しない限り
index.htmlに遷移するように設定してあります。
そのため、cssやjsはリダイレクト対象外のため直接アクセスできます。
おわりに
公式ドキュメントでも上記のようにhtaccessを使うよう記述してありました。
ちなみに公式ドキュメントは他のサーバ例も書いてありました。
例：nginx
location / {
try_files $uri $uri/ /index.html;
}https://v3.router.vuejs.org/ja/guide/essentials/history-mode.html#%E3%82%B5%E3%83%BC%E3%83%8F%E3%82%99%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A%E4%BE%8B
ありがとうございました。
本番環境がサブディレクトリにある場合
https://hasethblog.com/it/programming/vue/7591/
コメント