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;
}
HTML5 History モード | Vue Router
Vue.js の公式ルータ
v3.router.vuejs.org
ありがとうございました。
本番環境がサブディレクトリにある場合
【Vue】本番環境がサブディレクトリ配下の場合のhtaccessとvue.config.jsの書き方
vueをビルドした後に生成されたファイルを本番環境に置く際、
jsやcssのパスが違うことから参照できず画面が真っ白になることがあると思います。
そのためvue.config.jsにpublicPathを追加したりと修正をすると思いますが...
hasethblog.com
2023.04.16
コメント