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

viteでvue.jsを使用して作成したページをいざ本番環境にアップロードしたら、真っ白な画面になってしまった時のメモです。 既定でdistディレクトリに出力されるファイル一式は、本番環境ではメインのURLにデプロイされることを想定し、cssファイルやjsファイルのアセットをメインのURLルートで参照しています。 そのためサブディレクトリで公開したいページをbuildする際には、オプションを追加する必要がありました。 // vite.config.js export default defineConfig({ //sampleにデプロイする例 base: '/sample', })