vueをビルドした後に生成されたファイルを本番環境に置く際、
jsやcssのパスが違うことから参照できず画面が真っ白になることがあると思います。
そのためvue.config.jsにpublicPathを追加したりと修正をすると思いますが、
基本サブディレクトリではない前提での設定方法です。
今回は、サブディレクトリ配下にアプリを置くときに設定が必要な
vue.config.jsとhtaccessについて書いていきます。
本番環境がサブディレクトリ配下の書き方
本番環境が https:// domain . com/app/にあるとします。
その場合の書き方で記していきます。
vue.config.js
module.exports = defineConfig({
publicPath: process.env.NODE_ENV === 'production'
? '/app/'
: './'
})環境変数process.env.NODE_ENVでproduction(本番）の場合、
サブディレクトリ/app/、開発環境は./となるよう記述しています。
.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . app/index.html [L]
</IfModule>上のように記述し、index.htmlのある
フォルダと同じディレクトリに作成することにより、
動作します。
おわりに
今回は、サブディレクトリ配下にアプリを置く時の設定方法を記しました。
あまり設定する頻度が高くないので忘れがちなので備忘録として記しました。
コメント