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/」がルートに変更されます。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031