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: './', // この行を追加
});