Skip to main content
iotools.cloudiotools.cloud

Vite Config Generator

Generate a vite.config.ts/js file from a framework preset (Vanilla, React, React SWC, Vue, Svelte, Solid), optional plugins (SVGR, tsconfig-paths, PWA, compression, bundle visualizer), a path alias builder, a dev-server proxy rule editor, and build options — download or copy, ready to drop in.

Input

Selects the framework plugin and its recommended imports.

Only changes the filename/header comment — the config body is valid either way.

Plugins

Path Aliases

One per line as alias=path, e.g. @=./src. Leave blank for none.

Dev Server

Vite's own default is 5173 — only emitted if you change it.

One per line as path=target, e.g. /api=http://localhost:3000. Leave blank for none.

Build

Output Options

Output

Generated Config
Was this helpful?

More ways to use this tool

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"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `vite-config-generator` tool (Vite Config Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Embed widget

<iframe
  src="https://iotools.cloud/embed/vite-config-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Vite Config Generator — 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>

Drop this into your own page — free, no key required, just a link back.

Cost per API/MCP callFrom 5 credits
Need more credits?View pricing

Also available with

IntegrationsBrowser extensionVS Code extension

Guides

The Vite Config Generator builds a ready-to-use vite.config.ts (or .js) from a few dropdowns and toggles — no need to memorize plugin import names, the fileURLToPath/import.meta.url alias pattern, or the shape of a proxy rule. Pick your framework, wire up a few plugins and aliases, and copy the generated file straight into your project.

What it does

Vite configs look simple until you need path aliases, a dev-server proxy, or more than one plugin — then you're juggling imports, the resolve.alias object, and server.proxy entries by hand. This tool assembles all of that for you. It supports:

  • Framework presets — Vanilla, React (@vitejs/plugin-react), React with SWC (@vitejs/plugin-react-swc), Vue 3, Svelte, and Solid, each with the matching plugin import and install command.
  • Feature plugins — SVGR (import SVGs as React components), vite-tsconfig-paths, vite-plugin-pwa, gzip/Brotli compression, and a bundle-size visualizer, each an independent toggle.
  • Path alias builder — one alias=path line per alias, rendered as the ESM-safe fileURLToPath(new URL('./path', import.meta.url)) pattern (works from any file, unlike __dirname).
  • Dev server proxy editor — one path=target line per rule, rendered as a server.proxy entry with changeOrigin: true.
  • Build options — target, output directory, and sourcemaps.
  • TypeScript vs. JavaScript — toggles the filename/header comment; the generated body is valid either way.

Only the sections you actually change from Vite's own defaults show up in the output — no port: 5173 line restating the default, no empty build block — so the file reads like something a person wrote by hand, not a template dump.

How to use it

  1. Pick your framework.
  2. Toggle any plugins you need (SVGR only appears for React presets).
  3. Add path aliases, one per line as alias=path (e.g. @=./src).
  4. Set a custom dev-server port, enable open/host, and add proxy rules if you need them.
  5. Adjust build options if your target or output directory isn't the Vite default.
  6. Copy the generated config or download it, then run the install command it shows.

The output updates instantly as you change any option.

Do I still need to install the packages?

Yes. The tool generates the config text and the matching install command, but it does not install anything for you. Run the npm install -D … line it produces (or the yarn/pnpm equivalent) so Vite can resolve the referenced plugins.

Why does my alias use fileURLToPath(new URL(...)) instead of path.resolve(__dirname, ...)?

vite.config.ts runs as an ES module, where __dirname isn't available without extra setup. The fileURLToPath(new URL('./src', import.meta.url)) pattern is the ESM-safe equivalent Vite's own templates use, and it works the same whether the config is TypeScript or JavaScript.

Can I fine-tune the config afterward?

Absolutely. The generated file is an ordinary starting point — add more plugins, extend the resolve.alias/server.proxy objects, or layer on options this generator doesn't cover. Treat the output as a solid baseline, not a locked-in result.

Privacy

This generator runs entirely in your browser. Your selections are never uploaded, logged, or stored — the configuration is assembled locally from the options you choose, and nothing leaves your device.

vitevite.configbundlerbuild toolreactvuesveltesoliddeveloper tools

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads