viteでvue.jsを使用して作成したページをいざ本番環境にアップロードしたら、真っ白な画面になってしまった時のメモです。
既定でdistディレクトリに出力されるファイル一式は、本番環境ではメインのURLにデプロイされることを想定し、cssファイルやjsファイルのアセットをメインのURLルートで参照しています。
そのためサブディレクトリで公開したいページをbuildする際には、オプションを追加する必要がありました。
// vite.config.js
export default defineConfig({
//sampleにデプロイする例
base: '/sample',
})
設定オプションについての詳細は、Vite の設定 Public Base Path に説明がありました。
$ npm run build
これでdistディレクトリに作成されたファイル一式をFTPクライアントソフトでサーバにアップロードすると、無事に公開できました。
下記のコマンドでのローカルでのプレビューも問題なくできました。
但し、サブディレクトリのパスの最後にスラッシュがないと「base” option should end with a slash」と警告が出ますので、「http://localhost:4173/sample/」でアクセスできます。
$ npm run preview