vite

现代化前端构建工具，由 Evan You（Vue.js 作者）开发。设计目标是极快的开发启动速度和高效的生产构建。通过原生 ES 模块支持和按需构建解决传统构建工具的性能瓶颈。

核心优势

• 开发极快：利用浏览器原生 ESM，按需编译，无需打包整个项目
• HMR 极速：模块热替换只更新变动部分
• 生产优化：基于 Rollup 打包，输出高度优化
• 开箱即用：支持 Vue、React、Svelte 等框架

安装

npm install -g vite
# 或直接用脚手架创建项目
npm create vite@latest my-app

创建项目

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

常用命令

vite          # 启动开发服务器
vite build    # 生产构建
vite preview  # 预览生产构建

配置文件 vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
})

工具边界

场景	推荐
新项目开发体验	vite ✅
旧项目迁移（高度定制 webpack）	评估成本
库打包	vite library mode 或 rollup
极简 TS 编译	esbuild

踩坑点

• 开发时使用原生 ESM，生产构建用 Rollup，两套行为有细微差异（如动态 import.meta.env）
• CJS 依赖需要 vite 自动预构建（optimizeDeps），首次启动可能慢
• 不支持 CommonJS 项目的无缝迁移，需逐步改 ESM

相关

• electrobun — 桌面应用框架，常与 vite 组合：vite 负责前端资源构建与 HMR，electrobun 负责原生壳承载
• vite-config-ts — vite.config.ts 配置文件详解，dev/build/server/resolve.alias 全字段