Vite 配置生成器
从框架预设（Vanilla、React、React SWC、Vue、Svelte、Solid）生成 vite.config.ts/js 文件，可选插件（SVGR、tsconfig-paths、PWA、压缩、bundle 可视化工具），路径别名构建器，dev-server 代理规则编辑器和构建选项 — 下载或复制，准备就绪。
输入
选择框架插件及其推荐的导入项。
仅更改文件名/头部注释 — 配置主体以任一方式都是有效的。
插件
路径别名
每行一个，格式为 alias=path，例如 @=./src。无别名则留空。
开发服务器
Vite 自身的默认值是 5173 — 仅当您更改它时才输出。
每行一个，格式为 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_HERE将此粘贴给任何已连接 IOTools 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 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
Vite 配置生成器从几个下拉菜单和切换开关生成随时可用的vite.config.ts（或.js）— 无需记忆插件导入名称、fileURLToPath/import.meta.url 别名模式或代理规则的形式。选择您的框架，配置几个插件和别名，然后将生成的文件直接复制到您的项目中。
它的工作原理
Vite 配置看起来很简单，直到您需要路径别名、开发服务器代理或多个插件 — 那时您就在手动处理导入、resolve.alias 对象和 server.proxy 条目。这个工具为您组装所有这些。它支持：
- 框架预设 — Vanilla、React（
@vitejs/plugin-react）、React with SWC（@vitejs/plugin-react-swc）、Vue 3、Svelte 和 Solid，每个都带有匹配的插件导入和安装命令。 - 功能插件 — SVGR（将 SVG 导入为 React 组件）、
vite-tsconfig-paths、vite-plugin-pwa、gzip/Brotli 压缩和 bundle 大小可视化工具，每个都是独立的切换。 - 路径别名构建器 — 每个别名一行
alias=path，呈现为 ESM 安全的fileURLToPath(new URL('./path', import.meta.url))模式（与__dirname不同，适用于任何文件）。 - 开发服务器代理编辑器 — 每个规则一行
path=target，呈现为带有changeOrigin: true的server.proxy条目。 - 构建选项 — 目标、输出目录和 sourcemap。
- TypeScript vs. JavaScript — 切换文件名/头部注释；生成的主体以任一方式都是有效的。
只有您从 Vite 自身的默认值中实际更改的部分才会出现在输出中 — 没有重申默认值的 port: 5173 行，没有空的 build 块 — 因此文件读起来就像是人手写的东西，而不是模板转储。
如何使用
- 选择您的框架。
- 切换任何您需要的插件（SVGR 仅对 React 预设显示）。
- 添加路径别名，每行一个，格式为
alias=path（例如@=./src）。 - 设置自定义开发服务器端口，启用打开/主机，并在需要时添加代理规则。
- 如果您的目标或输出目录不是 Vite 默认值，请调整构建选项。
- 复制生成的配置或下载它，然后运行它显示的安装命令。
当您更改任何选项时，输出会立即更新。
我仍然需要安装这些包吗？
是的。工具生成配置文本和匹配的安装命令，但不会为您安装任何东西。运行它生成的 npm install -D … 行（或 yarn/pnpm 等效项），以便 Vite 可以解析引用的插件。
为什么我的别名使用 fileURLToPath(new URL(...)) 而不是 path.resolve(__dirname, ...)？
vite.config.ts 作为 ES 模块运行，其中 __dirname 在没有额外设置的情况下不可用。fileURLToPath(new URL('./src', import.meta.url)) 模式是 Vite 自身模板使用的 ESM 安全等效项，无论配置是 TypeScript 还是 JavaScript，它的工作方式都相同。
我可以稍后微调配置吗？
当然可以。生成的文件是一个普通的起点 — 添加更多插件、扩展 resolve.alias/server.proxy 对象或分层此生成器不涵盖的选项。将输出视为坚实的基线，而不是锁定的结果。
相关工具
隐私
此生成器完全在您的浏览器中运行。您的选择永远不会被上传、记录或存储 — 配置从您选择的选项本地组装，没有任何内容离开您的设备。