Vite config generator
Generate a vite.config.ts with Vue or React plugins, path aliases, dev proxy, build target, manual chunks, minifier and env prefix — previewed live in the browser.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Build options
Tick only what the project actually uses — the vite.config.ts updates below.
Generated config
vite.config.tsvite, @vitejs/plugin-vueimport { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'node:url';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
build: {
target: 'es2020',
minify: 'esbuild',
},
envPrefix: 'VITE_',
});
What this tool does
- After scaffolding with create-vite you usually want aliases and a proxy: tick both and copy ready-made resolve.alias and server.proxy blocks instead of digging through docs.
- Investigating bundle size? Turn on vendor splitting and terser to compare output across different build targets.
- In a split frontend/backend setup, forward /api to your local backend instead of hard-coding a cross-origin URL into the app.
- Standardise a build baseline for the team: commit target, minifier and env prefix so new members do not have to guess.
Example
Input
Framework React, alias @ → src, dev proxy /api → http://localhost:3000, target es2020, esbuild, prefix VITE_
Output
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath, URL } from 'node:url';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
},
},
},
build: {
target: 'es2020',
minify: 'esbuild',
},
envPrefix: 'VITE_',
});Slashes in the proxy prefix are escaped for the rewrite regex, so /api becomes /^\/api/ and pastes into a project without syntax errors.
Frequently asked questions
Which build target should I pick?
es2020 is fine for modern browsers. Choose es2015 when you must support older engines (Safari before iOS 12, for example) at the cost of extra downlevel code; choose esnext when you only target current Chromium or Node and want the cleanest output.
What does manualChunks actually buy me?
It bundles node_modules into a separate vendor chunk. When your own code changes often, third-party hashes stay stable and browsers keep reusing the cached vendor file. Projects with few dependencies do not need it — too many chunks means more requests.
terser or esbuild for minification?
esbuild is Vite’s default: fast and reasonably small output. terser usually shaves a few more percent off the bundle but needs an extra dependency and slows the build. Switch to terser only when you are chasing the last few kilobytes.
Why can’t my env variables be read after changing envPrefix?
Only variables starting with that prefix are injected into client code, and they must be read through import.meta.env. With APP_ you write APP_API_URL=... and read import.meta.env.APP_API_URL. The prefix cannot be lowercase, which avoids clashing with built-in variables.
Will the tool install the dependencies for me?
No. The result panel lists the packages you need (for example @vitejs/plugin-react or terser); running the install command is up to you. The page never touches the network or your files.
Keywords：vitevite configvite.config.tsvite 配置构建工具开发代理manualChunks路径别名前端工程化vite 生成器