vite 入门
发布于 2026/08/19 · 公开
vite 是什么
Vite 是一个现代前端开发工具，负责让你的前端代码“开发时跑起来、生产时打包出来。
React / Vue / Svelte
↓
写代码
↓
Vite
┌────┴─────┐
↓ ↓
开发服务器 生产构建
↓ ↓
浏览器 dist/
vite 和 webpack 的区别
webpack 的思路：
源代码
↓
Webpack
↓
分析整个依赖图
↓
打包
↓
bundle.js
↓
浏览器
vite 的思路
源代码
↓
Vite Dev Server
↓
浏览器原生 ESM
↓
按需请求模块
例如：
import { createApp } from 'vue'
import App from './App.vue'
浏览器需要哪个模块，就向 Vite 请求哪个模块。
所以开发时：
修改 Button.tsx
↓
浏览器重新请求/更新 Button
↓
页面立即更新
而不是每次都重新把整个项目打包。
Vite 官方也明确把开发服务器建立在原生 ESM 之上，并提供 HMR
vite 项目
本文以vite 8 为例。
Node.js >= 20.19
或者
Node.js >= 22.12
输入：
npm create vite@latest
之后会提供一系列选项。
更推荐使用命令创建项目：
npm create vite@latest my-app -- --template react-ts
安装依赖
npm install
然后
npm run dev
这是就能看到项目启动了