gh-pagesにVite+Reactでビルドしたものをアップロードしても何も表示されないときの対処法

ブラウザのコンソールに以下のようなエラーメッセージが出ている方が対象です

GET https://**.github.io/assets/index-nOEXHWKn.js net::ERR_ABORTED 404 (Not Found)

これはファイルが見つからないため404エラーを起こしてしまっていることが原因です

ビルドしたjsやcssのパスが /assets/index-oIJWEASd.js となってしまっているため、本来
https://ユーザー名.github.io/リポジトリ名/assets/index-oIJWEASd.js を読み込みたいはずが
https://ユーザー名.github.io/assets/index-oIJWEASd.js になっているせいで404が発生しています

環境
React: 18.3.1
Vite: 5.4.1

解決策

vite.config.ts（なければ vite.config.js ）のdefineConfig内に base: "./"を追記することでビルドしたjsやcssのパスが相対パスとなり読み込まれるはずです

こんな感じのコードになっていればOK

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
+  base: './', // この行を追加
});