Vite設定ジェネレーターとは
本ツールは、フロントエンドの高速ビルドツール「Vite」の設定ファイル（vite.config.js または vite.config.ts）を、UIから入力するだけで自動生成する無料ツールです。フレームワーク（React/Vue/Svelte/Solid/Preact/Lit/Vanilla）、TypeScript有無、開発サーバのポート・LAN公開・ブラウザ自動起動、ビルドの出力先・minify方式・sourcemap、パスエイリアス、APIプロキシ設定までをカバー。出力されたコードはコピー1つでプロジェクトのルートに貼り付けられます。入力データはサーバーに送信されず、ブラウザ内で完結します。
対応フレームワーク
| フレームワーク | 必要な公式プラグイン |
|---|---|
| React | @vitejs/plugin-react（Babel版・デフォルト） |
| React (SWC) | @vitejs/plugin-react-swc（高速版） |
| Vue | @vitejs/plugin-vue |
| Svelte | @sveltejs/vite-plugin-svelte |
| Solid | vite-plugin-solid |
| Preact | @preact/preset-vite |
| Vanilla / Lit | 不要（プラグインなしで動作） |
主な設定項目
- server.port / host / open / strictPort: 開発サーバのポート、LAN公開、起動時のブラウザ自動オープン、ポート競合時の挙動
- base: 公開先がサブディレクトリの場合（例
/myapp/）に設定 - resolve.alias: import文を短縮するパスエイリアス（例
@/components/Button） - server.proxy: 開発サーバ起動中、特定パス（例
/api）のリクエストをAPIサーバへ転送 - build.outDir / minify / sourcemap / emptyOutDir: 本番ビルドの出力先、圧縮、ソースマップ、出力先の事前クリア
生成された設定ファイルの使い方
- プロジェクトのルート（
package.jsonと同じ階層）にvite.config.jsまたはvite.config.tsとして保存 - 表示されたインストールコマンド（例
npm i -D @vitejs/plugin-react）を実行してプラグインを導入 npm run devで開発サーバを起動 /npm run buildで本番ビルド
既に vite.config.* が存在する場合は、本ツール出力と既存内容を見比べて必要な部分のみマージしてください。
