Vite + Vueでビルドしたが真っ白

概要

この記事では、Vite + Vueでビルドしたのに、index.htmlを見るとページが真っ白の場合の解決策の一つをご紹介します。

問題

npm run buildでビルドして、index.htmlを「Go　Live」などで確認してみると、中身が真っ白になっていた。

解決策

コンソールログなどで確認してみると、jsやcssなどが見つからないというようなエラーが出ている可能性が大きい。その場合、jsなどのリソースのディレクトリを正しく参照できていないのが原因である。

その場合、ディレクトリの場所をviteに明示してあげる必要がある。私の場合はビルド先をdocsディレクトリにしていたので、それに準じた設定をする。
Go Lineなど、ローカルで確認したい場合は、vite.config.ts以下の設定を追記する。

export default defineConfig({
  base: '/docs',
  plugins: [
    vue(),
  ],
  // ...その他記述
  build: {
    outDir: 'docs',
  },
})

もし、github.ioなどでデプロイしたい場合は、Githubのディレクトリ名を入れる。

export default defineConfig({
  base: '/portfolio_vue',
  plugins: [
    vue(),
  ],
  // ...その他記述
  build: {
    outDir: 'docs',
  },
})

私はこの方法により、正しく表示されました。

終わりに

何かうまく行かないときは、焦らずに今使っている技術の仕組みを改めて確認し直すことが大切だと思いました。