Vite + Reactの環境でルートパスを変更する

Vite + Reactの環境でビルドを行った際、ルートパスはデフォルトだと「/」になりますが、別のディレクトリをルートにして公開したいということがあったので、設定方法をメモ。

設定方法

vite.config.js を変更します。
変更前は以下のような内容になっています。

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

例えば「/blog/」をルートとしたい場合、以下のような設定になります。

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

// https://vitejs.dev/config/
export default defineConfig({
  base: "/blog/",
  plugins: [react()],
})

これで開発環境を起動すると、http://localhost:5173/blog/ のURLで起動することができました。
ファイルパスなども「/」から「/blog/」がルートに変更されます。