Vite 配置生成器
生成 vite.config.ts：可选 Vue / React 插件、路径别名、开发代理、构建 target、手动分包、压缩器与环境变量前缀，浏览器本地实时预览。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
构建选项
只勾项目真正用到的部分，生成的 vite.config.ts 会立刻出现在下方。
生成的配置
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_',
});
这个工具能做什么
- 用 create-vite 起完项目后想加别名和代理：勾一下就能拿到对应的 resolve.alias 与 server.proxy 片段，不用翻文档。
- 排查「打包体积为什么这么大」时，打开 vendor 分包与 terser，对比不同 target 下的产物差异。
- 前后端分离开发时把 /api 转发到本地后端，避免在生产代码里写死跨域地址。
- 团队统一构建基线：把 target、压缩器、环境变量前缀写进 vite.config.ts 提交，新成员不用猜。
示例
输入
框架 React，别名 @ → src，开发代理 /api → http://localhost:3000，target es2020，压缩器 esbuild，前缀 VITE_
输出
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_',
});rewrite 里的正则会自动转义前缀中的斜杠，所以 /api 会写成 /^\/api/，直接粘进项目不会变成语法错误。
常见问题
构建 target 该选哪个？
默认 es2020 对现代浏览器足够。需要兼容较老的浏览器（比如 iOS 12 之前的 Safari）时选 es2015，代价是产物里会多出降级代码；只跑在最新 Chromium 或 Node 环境时选 esnext，产物最干净。
manualChunks 分包有什么用？
勾上后会把 node_modules 里的依赖单独打成一个 vendor 包。业务代码频繁发版时，第三方依赖的 hash 不变，浏览器就能继续用缓存。依赖很少的项目没必要开，包太碎反而增加请求数。
terser 和 esbuild 压缩有什么区别？
esbuild 是 Vite 默认压缩器，速度快、压缩率也不错；terser 通常能再小几个百分点，但要多装一个 terser 依赖、构建也慢一些。追求极致体积时才换 terser。
envPrefix 改了之后为什么环境变量读不到？
只有以该前缀开头的变量才会被注入到客户端代码，且必须通过 import.meta.env 访问。比如前缀设为 APP_，就要写 APP_API_URL=... 并读 import.meta.env.APP_API_URL；前缀本身不支持小写，避免和内置变量混淆。
生成的配置会替我安装依赖吗？
不会。结果区会列出需要安装的包（例如 @vitejs/plugin-react、terser），安装命令由你按项目的包管理器执行，页面本身不联网、不写入文件。
关键词：vitevite configvite.config.tsvite 配置构建工具开发代理manualChunks路径别名前端工程化vite 生成器