Which Vite version is this config compatible with?

The generated config uses the stable Vite 5.x API and is backward-compatible with Vite 4.x. Plugin package names (e.g. @vitejs/plugin-react) have not changed across these versions.

Can I add multiple proxy rules?

Yes. Click "Add Proxy Rule" as many times as needed. Each rule maps a path prefix (e.g. /api) to a target origin (e.g. http://localhost:3001). The generated config will include all of them.

What is the base path option?

The base path sets the public base URL your app is served from. Use "/" for the root (default). If your app lives at https://example.com/myapp/, set base to "/myapp/".

Does the TypeScript output differ from the JavaScript output?

Yes. The TypeScript version uses import type { UserConfig } from 'vite' and exports a typed config object, while the JavaScript version uses plain defineConfig without type annotations.

Do I need to install the framework plugin separately?

Yes. The generator adds the import and plugin call, but you must install the plugin package yourself (e.g. npm install -D @vitejs/plugin-react).

Vite Config Generator

Name: Vite Config Generator
Availability: InStock
Author: Nham Vu

Configure your Vite project options and instantly generate a ready-to-use vite.config.js or vite.config.ts file.

Configuration Options

Output Language

JavaScript (.js) TypeScript (.ts)

Framework

Base Path (public URL base)

Build Output Dir

Dev Server Port

Proxy Rules

No proxy rules — click "Add Rule" to add one.

vite.config.js

Copied!

Summary

Configure your Vite project options and instantly generate a ready-to-use vite.config.js or vite.config.ts file.

How it works

Choose your target language: JavaScript (.js) or TypeScript (.ts).
Select your framework to automatically include the correct Vite plugin.
Set the base path (default "/"), build output directory, and dev server port.
Add proxy rules by entering an API prefix and the target origin URL.
Click "Generate Config" and copy the output to your project.

Use cases

Quickly bootstrap a vite.config.ts for a new React + TypeScript project.
Set up a proxied dev server so API calls skip CORS issues during development.
Configure a non-root base path for apps deployed to a subdirectory.
Generate a Vue or Svelte config without looking up plugin import syntax.
Share a ready-made config snippet with teammates or in a Stack Overflow answer.
Validate the correct Vite option names before editing your existing config.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu