Skip to content
前端
Vite
安装与快速开始

安装与快速开始

Vite（法语"快"）是由 Vue.js 作者尤雨溪开发的下一代前端构建工具。它利用浏览器原生 ES Module 支持，实现极速冷启动和 HMR（热模块替换），已取代 Webpack/CRA 成为 Vue、React 等主流框架的官方推荐构建方案。

官方文档：Vite 中文文档 最低 Node.js 版本：18+

前置条件

  • Node.js：18.0 或更高版本（Vite 6 要求 18+/20+）
  • 包管理器：npm / pnpm / yarn 任选其一
  • 现代浏览器：支持原生 ES Module（Chrome 87+, Firefox 78+, Safari 14+, Edge 87+）

创建项目

方式一：create-vite 脚手架（推荐） 

# npm
npm create vite@latest

# pnpm
pnpm create vite

# yarn
yarn create vite

交互式选择框架和语言变体：

# 一键指定模板（跳过交互）
npm create vite@latest my-app -- --template react        # React + JS
npm create vite@latest my-app -- --template react-ts     # React + TS
npm create vite@latest my-app -- --template vue          # Vue + JS
npm create vite@latest my-app -- --template vue-ts       # Vue + TS
npm create vite@latest my-app -- --template vanilla      # 原生 JS
npm create vite@latest my-app -- --template vanilla-ts   # 原生 TS
npm create vite@latest my-app -- --template svelte       # Svelte

常用模板一览：

模板 说明
vanilla / vanilla-ts 原生 JavaScript / TypeScript
vue / vue-ts Vue 3 + Vite
react / react-ts React + Vite
preact / preact-ts Preact
lit / lit-ts Lit Web Components
svelte / svelte-ts Svelte
solid / solid-ts SolidJS

方式二：手动安装 

mkdir my-app && cd my-app
npm init -y
npm i -D vite

然后手动创建 index.html（必须放在 项目根目录，而非 public）：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

🚨 陷阱：index.html 必须放在项目根目录，这是 Vite 与 Webpack/CRA 的关键区别。Vite 将 index.html 视为源码的一部分，直接作为入口 HTML 文件。

添加 npm scripts：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

项目结构

典型的 Vite + React 项目：

my-app/
├── index.html                 # 入口 HTML（必须在根目录）
├── package.json
├── vite.config.js             # Vite 配置文件
├── public/                    # 静态资源（直接拷贝，不经过构建）
│   └── favicon.ico
├── src/
│   ├── main.jsx               # 应用入口
│   ├── App.jsx                # 根组件
│   ├── App.css                # 根组件样式
│   ├── index.css              # 全局样式
│   ├── components/            # 可复用组件
│   ├── hooks/                 # 自定义 Hooks
│   ├── pages/                 # 页面级组件
│   ├── utils/                 # 工具函数
│   └── assets/                # 需构建处理的资源（图片、字体等）
└── dist/                      # 构建输出（npm run build 生成）

命令行 CLI 

# 启动开发服务器（默认 http://localhost:5173）
vite [root]

# 生产构建
vite build [root]

# 本地预览生产构建产物（默认 http://localhost:4173）
vite preview [root]

# 常用选项
vite --port 3000                # 指定端口
vite --host                    # 暴露到局域网
vite --open                    # 自动打开浏览器
vite --mode staging            # 指定模式
vite build --mode production   # 指定构建模式
vite build --base /my-app/     # 指定公共基础路径

💡 最佳实践：开发时用 vite --open 自动打开浏览器；局域网易出问题用 --host 0.0.0.0 暴露给网络。

第一个项目

以 React + JS 为例：

npm create vite@latest vite-demo -- --template react
cd vite-demo
npm install
npm run dev

访问 http://localhost:5173 就能看到页面。修改 src/App.jsx 中的内容，页面会瞬间更新（HMR）。

配置文件初览 

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  // 插件
  plugins: [react()],

  // 开发服务器
  server: {
    port: 3000,
    open: true,
  },

  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: true,
  },

  // 路径别名
  resolve: {
    alias: {
      '@': '/src',
    },
  },
})

defineConfig 是可选的，但提供完整的 TypeScript 类型提示。

Vite vs CRA vs Webpack

特性 Vite CRA Webpack 5
冷启动速度 ⚡ 极快（< 1s） 🐢 慢（30s+） 🐢 慢（取决于配置）
HMR 速度 ⚡ 极快（< 50ms） 🐢 随项目变大而变慢 🐢 随项目变大而变慢
构建引擎 esbuild + Rollup Webpack Webpack
配置复杂度 低 极低（无配置） 高
原生 ESM ✅ 开发时使用 ❌ 打包为 Bundle ❌ 打包为 Bundle
生态 快速增长 停滞（已不推荐） 成熟庞大
官方推荐 ✅ 推荐用于新项目 ❌ 已进入维护模式 —
核心概念