Viteコンフィグジェネレータ
フレームワークプリセット（Vanilla、React、React SWC、Vue、Svelte、Solid）からvite.config.ts/jsファイルを生成します。オプションのプラグイン（SVGR、tsconfig-paths、PWA、圧縮、バンドルビジュアライザー）、パスエイリアスビルダー、dev-serverプロキシルールエディタ、ビルドオプション — ダウンロードまたはコピーして、すぐに使用できます。
入力
フレームワークプラグインと推奨インポートを選択します。
ファイル名/ヘッダーコメントのみを変更します。コンフィグ本体はどちらの方法でも有効です。
プラグイン
パスエイリアス
1行に1つをalias=pathの形式で入力します。例：@=./src。なしの場合は空白のままにします。
開発サーバー
Vite独自のデフォルトは5173です。変更する場合のみ出力されます。
1行に1つをpath=targetの形式で入力します。例：/api=http://localhost:3000。なしの場合は空白のままにします。
ビルド
出力オプション
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/vite-config-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"framework": "reactSwc",
"useTypescript": "true",
"pluginSvgr": "true",
"pluginTsconfigPaths": "",
"pluginPwa": "",
"pluginCompression": "",
"pluginVisualizer": "",
"aliases": "@=./src",
"serverPort": "3000",
"serverOpen": "true",
"serverHost": "",
"proxyRules": "/api=http://localhost:8080",
"buildTarget": "esnext",
"outDir": "dist",
"sourcemap": "",
"includeComments": "true",
"includeHeader": "true",
"includeInstall": "true"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `vite-config-generator` tool (Vite Config Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/vite-config-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Viteコンフィグジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
Viteコンフィグジェネレータは、いくつかのドロップダウンとトグルから、すぐに使えるvite.config.ts（または.js）を作成します。プラグインのインポート名、fileURLToPath/import.meta.urlエイリアスパターン、プロキシルールの形式を覚える必要はありません。フレームワークを選択し、いくつかのプラグインとエイリアスを設定して、生成されたファイルをプロジェクトに直接コピーします。
動作
Viteコンフィグはパスエイリアス、開発サーバープロキシ、または複数のプラグインが必要になるまで簡単に見えます。その時点で、手でインポート、resolve.aliasオブジェクト、server.proxyエントリをジャグリングしています。このツールはすべてをあなたのために組み立てます。以下をサポートしています：
- フレームワークプリセット — Vanilla、React（
@vitejs/plugin-react）、SWC付きReact（@vitejs/plugin-react-swc）、Vue 3、Svelte、およびSolid。各フレームワークに対応するプラグインインポートとインストールコマンドが含まれます。 - 機能プラグイン — SVGR（SVGをReactコンポーネントとしてインポート）、
vite-tsconfig-paths、vite-plugin-pwa、gzip/Brotli圧縮、バンドルサイズビジュアライザー。各機能は独立したトグルです。 - パスエイリアスビルダー — エイリアスごとに1行の
alias=pathをESM安全なfileURLToPath(new URL('./path', import.meta.url))パターンとしてレンダリング（__dirnameと異なり、任意のファイルから動作）。 - 開発サーバープロキシエディタ — ルールごとに1行の
path=targetをchangeOrigin: true付きのserver.proxyエントリとしてレンダリング。 - ビルドオプション — ターゲット、出力ディレクトリ、ソースマップ。
- TypeScript vs. JavaScript — ファイル名/ヘッダーコメントを切り替え。生成されたボディはどちらの方法でも有効です。
Viteのデフォルトから実際に変更したセクションのみが出力に表示されます。デフォルトのport: 5173行や空のbuildブロックはありません。そのため、ファイルはテンプレートダンプではなく、人間が手で書いたもののように読みます。
使い方
- フレームワークを選択します。
- 必要なプラグインをトグルします（SVGRはReactプリセットのみで表示されます）。
- パスエイリアスを追加します。1行に1つ
alias=pathの形式で（例：@=./src）。 - 開発サーバーのポートをカスタマイズし、open/hostを有効にし、必要に応じてプロキシルールを追加します。
- ターゲットまたは出力ディレクトリがViteデフォルトでない場合、ビルドオプションを調整します。
- 生成されたコンフィグをコピーするか、ダウンロードしてから、それが表示するインストールコマンドを実行します。
任意のオプションを変更するたびに、出力はリアルタイムで更新されます。
それでもパッケージをインストールする必要がありますか？
はい。ツールはコンフィグテキストと対応するインストールコマンドを生成しますが、何もインストールしません。それが生成するnpm install -D …行を実行してください（またはyarn/pnmの同等物）。そうすることで、Viteが参照されているプラグインを解決できます。
エイリアスがpath.resolve(__dirname, ...)の代わりにfileURLToPath(new URL(...))を使用するのはなぜですか？
vite.config.tsはES モジュールとして実行されます。ここで__dirnameは追加のセットアップなしには利用できません。fileURLToPath(new URL('./src', import.meta.url))パターンはVite独自のテンプレートが使用するESM安全な同等物です。コンフィグがTypeScriptでもJavaScriptでも同じように動作します。
後でコンフィグを微調整できますか？
もちろんです。生成されたファイルは通常の出発点です。プラグインを追加したり、resolve.alias/server.proxyオブジェクトを拡張したり、このジェネレータが対象としていないオプションを追加したりできます。出力を堅牢なベースラインとして扱い、ロックされた結果ではありません。
関連ツール
プライバシー
このジェネレータはブラウザ内で完全に実行されます。選択内容はアップロード、ログ、または保存されることはありません。コンフィグはあなたが選択したオプションからローカルに組み立てられ、デバイスを離れることはありません。