Vue.js 作成したシングルページアプリケーションをviteでbuildしサブディレクトリにデプロイする

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