はじめに

タイトルどおりVite+Reactのウェブサイトをサブディレクトリ下にデプロイする方法です。毎度忘れそうなので超個人的な備忘録です。興味がある人がいるかもしれないのでブログ化しておきます。

自分のサイトですがこのサイトのようにサブディレクトリ以下にトップページを配置したい時の手順です。

1 前提条件

• vite
• react
• typescript

上記の設定でプロジェクト作成。主の開発環境はWindowsですがMacでも変わらないと思います。

2 TL;DR

プロジェクトのルートディレクトリにあるvite.config.tsのファイルの中にあるdefineConfigの中にbase:'/サブディレクトリ名'という行を追記する。あるいは既に記載があればurlのサブディレクトリ名にしたい文字列に変更する。

たったこれだけですが、これをしないとjsやcssファイルなどの参照先がバグるので初めての時は躓いたので書き残しておきます。