viteでvue.jsを使用して作成したページをいざ本番環境にアップロードしたら、真っ白な画面になってしまった時のメモです。 既定でdistディレクトリに出力されるファイル一式は、本番環境ではメインのURLにデプロイされることを想定し、cssファイルやjsファイルのアセットをメインのURLルートで参照しています。 そのためサブディレクトリで公開したいページをbuildする際には、オプションを追加する必要がありました。 // vite.config.js export default defineConfig({ //sampleにデプロイする例 base: '/sample', })
![Vue.js 作成したシングルページアプリケーションをviteでbuildしサブディレクトリにデプロイする](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2553735350d1b3a198f3cd6066f3344e7d90e49/height=288;version=1;width=512/https%3A%2F%2Fb-moon.net%2Fwp-content%2Fuploads%2F2022%2F06%2F631eb229b29544b476e18bbe4b75c449.png)