Vite 入门指南：现代前端构建的标准答案
Vite 用原生 ESM 实现秒级启动与即时热更新。本文走完项目搭建、开发模式原理、CSS 与资源处理、配置定制与 Vitest 测试。
npm create vite@latest 选模板即开工——开发服务器毫秒启动（原生 ESM 免打包），vite build 用 Rollup 出生产产物。vite.config.js 一处配置，插件生态覆盖全部主流框架。
本文涉及 Vite 架构时，以版本区分：Vite 7 及更早版本使用 esbuild／Rollup 的组合；Vite 8 已改用 Rolldown 与 Oxc。旧插件及构建选项迁移请按 Vite 8 迁移文档 检查，不能将旧版本的内部实现当作当前所有版本的行为。
创建项目
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install
npm run dev # 毫秒级启动
开发模式为什么快
传统打包器启动要构建完整依赖图；Vite 的开发服务器按请求编译：浏览器请求哪个模块就编译哪个——启动时间与项目规模解耦。依赖预打包（esbuild）把 node_modules 的合成模块压平，HMR 精确到文件。
CSS 与资源
import './style.css'; // CSS 直接导入
import logo from './logo.svg'; // 资源返回 URL
import raw from './data.txt?raw'; // ?raw 导入原始内容
CSS Modules（.module.css 自动启用）、Sass/Less（装预处理器即用）、PostCSS 自动读取配置——约定优于配置。
配置定制
// vite.config.js
export default {
resolve: { alias: { '@': '/src' } },
server: { proxy: { '/api': 'http://localhost:3000' } }, // 开发代理
build: {
rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'] } } },
},
};
Vitest 测试
npm install -D vitest
import { describe, it, expect } from 'vitest';
describe('utils', () => {
it('format', () => expect(format(1)).toBe('1'));
});
与 Vite 共享配置与转换管道——测试环境与构建环境行为一致，这是 Jest 方案做不到的。
常见问题（FAQ）
Q：Vite 支持多页应用吗？
支持——build.rollupOptions.input 配多入口。
Q：环境变量怎么用？
import.meta.env.VITE_*（前缀白名单防泄漏）——.env 文件按模式分层（.env.development/.env.production）。
Q：SSR？
Vite 有 SSR API，但常规需求用元框架（Next/Nuxt/SvelteKit）——它们内置了 Vite 式的开发体验。
参考文档
本文依据公开文档整理，示例需按项目依赖版本验证；不将文档中的性能描述视为本项目实测结果。
