Vite Config Generator

Free online Vite configuration file generator. Create perfect vite.config.js/vite.config.ts files with customizable build options, plugins, aliases, server settings, and presets for React, Vue, Svelte, and more.

Quick Presets

Configuration Options

e.g. / or /app/
e.g. dist
e.g. assets
e.g. 3000
KB, e.g. 500

Plugins

Build & Server Options

e.g. {"@": "/src", "@components": "/src/components"}
Comma-separated package names
e.g. VITE_
JSON object, e.g. {"/api": "http://localhost:8080"}

About Vite Config Generator

Vite is a next-generation frontend build tool that offers lightning-fast development server and optimized production builds. This tool generates customized vite.config.js or vite.config.ts files for your project with quick presets for popular frameworks and fine-grained control over build, server, and plugin options. All processing happens in your browser — no data is sent to any server.

Features

Frequently Asked Questions

What is Vite?

Vite is a modern frontend build tool created by Evan You (creator of Vue.js). It provides an extremely fast development server using native ES modules and produces highly optimized production builds using Rollup.

Should I use vite.config.js or vite.config.ts?

Use vite.config.ts if your project uses TypeScript — it provides better IDE support, type checking, and autocompletion. Use vite.config.js for JavaScript projects. Both work identically at runtime.

What is the difference between esbuild and terser minifier?

esbuild is Vite's default minifier — it's extremely fast but produces slightly larger output. terser is slower but produces smaller bundles. For most projects, esbuild is recommended.

How do path aliases work?

Path aliases let you import modules using shortcuts like @/components/Button instead of ../../../components/Button. Vite resolves these aliases using the resolve.alias configuration.

Is my data private?

Yes, all processing happens locally in your browser. No data is sent to any server or stored anywhere.