构建工具

Vite 完整技术文档：前端构建工具的革命

本文是 Vite 的独立技术手册，系统讲解：为什么会出现 Vite（背景与痛点）、Vite 是什么（定义、原理、核心优势）、Vite 怎么使用（安装、创建、配置、实战）、与 Webpack 对比、避坑...

作者：洋柿子·2026-09-01·共 6 篇 · 当前 5

一、文档定位

本文是 Vite 的独立技术手册，系统讲解：为什么会出现 Vite（背景与痛点）、Vite 是什么（定义、原理、核心优势）、Vite 怎么使用（安装、创建、配置、实战）、与 Webpack 对比、避坑指南，适配 Vue/React/Svelte 等主流框架，可直接用于开发、面试与学习存档。

二、为什么会出现 Vite（历史背景与核心痛点）

1. 传统构建工具的致命瓶颈

在 Vite 诞生前，Webpack、Rollup 等主流构建工具采用Bundle 模式，存在以下严重问题Vite：

表格

痛点	具体表现	影响
冷启动慢	项目启动时需完整打包所有模块，大型项目可能等待数分钟	开发效率低下，打断开发思路
热更新慢	修改代码后需重新打包部分或全部模块，HMR 响应时间随项目规模增长	保存代码后等待数秒才能看到效果，体验差
资源浪费	打包时处理所有模块，即使大部分模块当前未被使用	内存占用高，CPU 负载大
开发 / 生产环境差异大	开发环境用 dev-server 打包，生产环境用不同配置打包	容易出现环境兼容问题，调试复杂

2. 浏览器原生 ESM 的崛起

随着浏览器对 ES 模块（ESM） 的全面支持，浏览器可直接通过 <script type="module"> 加载并解析模块化代码，无需预打包。这为 Vite 的诞生提供了技术基础。

3. Vite 的诞生契机

Vite 由 Vue.js 作者尤雨溪（Evan You）于 2019 年开发，最初是为了解决 Vue 3 开发中的构建性能问题，后发展为通用前端构建工具。核心洞察：开发阶段完全不需要打包，只在生产阶段进行优化打包。

三、Vite 是什么（核心定义与原理）

1. 核心定义

Vite（法语意为 “快速”，发音 /viːt/，近似 “veet”）是新一代前端构建工具，主要由两部分组成Vite：

开发服务器：基于原生 ESM 提供按需编译和极速 HMR（模块热替换）
构建指令：使用 Rolldown（Rollup 升级版）进行生产环境打包，生成高度优化的静态资源

2. 核心原理（革命性创新）

Vite 采用开发与生产环境分离优化的架构，彻底颠覆传统 Bundle 模式：

开发环境：ESM 驱动的按需编译

依赖预构建：启动时预打包第三方依赖（如 React、Vue），转为 ESM 格式并缓存，避免浏览器请求过多细小依赖文件
源文件按需编译：浏览器请求某个模块时，Vite 才实时编译该模块（如 Vue SFC、TS、JSX），并返回 ESM 格式
极速 HMR：只更新修改的模块，不影响整个应用，响应时间毫秒级

生产环境：Rolldown 优化打包

生产环境仍需打包（为了兼容性和性能），Vite 使用 Rolldown 提供以下优化：

代码分割（Code Splitting）
摇树优化（Tree-shaking）
压缩混淆
静态资源处理

3. 核心优势（对比传统工具）

表格

优势	说明	效果
秒级启动	无需打包，依赖预构建后立即启动	大型项目启动时间从分钟级降至秒级
极速 HMR	模块级热更新，不影响全局状态	保存代码后瞬间看到效果
按需编译	只编译当前请求的模块	内存占用低，CPU 负载小
开箱即用	内置 TypeScript、JSX、CSS、静态资源支持	无需复杂配置即可开发现代前端应用
插件生态	基于 Rollup 插件 API，兼容大部分 Rollup 插件	扩展能力强，生态丰富
轻量高效	核心代码精简，无冗余功能	安装速度快，运行效率高

四、Vite 完整使用流程（从安装到实战）

1. 环境准备

Vite 要求 Node.js 版本 ≥ 14.18.0（推荐 18.x 或 20.x LTS 版本）

bash

运行

# 检查 Node.js 版本
node -v
# 检查 npm 版本
npm -v
# 升级 npm（可选）
npm install -g npm@latest

2. 创建 Vite 项目（三种方式）

方式 1：交互式创建（推荐）

bash

运行

# npm
npm create vite@latest
# yarn
yarn create vite
# pnpm（推荐，速度快、磁盘占用低）
pnpm create vite
# bun
bun create vite

执行后按提示选择：

项目名称
框架（Vue、React、Svelte、Vanilla 等）
变体（JavaScript/TypeScript）

方式 2：命令行直接指定模板

bash

运行

# 创建 Vue + TypeScript 项目
npm create vite@latest my-vue-app -- --template vue-ts
# 创建 React + JavaScript 项目
npm create vite@latest my-react-app -- --template react
# 创建 vanilla JavaScript 项目
npm create vite@latest my-vanilla-app -- --template vanilla

方式 3：手动安装（现有项目迁移）

bash

运行

# 安装 Vite 作为开发依赖
npm install -D vite
# 创建入口文件 index.html 和 src/main.js
# 添加脚本到 package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

3. 项目结构解析（Vue + TypeScript 示例）

plaintext

my-vue-app/
├── node_modules/       # 依赖包
├── public/             # 静态资源（直接复制到输出目录）
│   └── favicon.ico
├── src/                # 源代码
│   ├── assets/         # 资源文件（会被处理）
│   │   └── logo.png
│   ├── components/     # 组件
│   │   └── HelloWorld.vue
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件
├── .gitignore          # Git 忽略文件
├── index.html          # 入口 HTML（Vite 特殊之处）
├── package.json        # 项目配置
├── tsconfig.json       # TypeScript 配置
├── tsconfig.node.json  #  Node.js TypeScript 配置
└── vite.config.ts      # Vite 配置文件

关键特点：Vite 以 index.html 为入口文件，而非 src/main.js，HTML 中的 <script type="module"> 直接引用源代码Vite。

4. 核心命令与功能

表格

命令	作用	常用参数
`npm run dev`	启动开发服务器	`--open`（自动打开浏览器）、`--port 3000`（指定端口）
`npm run build`	生产环境打包	`--mode production`（默认）、`--mode staging`（测试环境）、`--profile`（生成构建报告）
`npm run preview`	预览生产环境打包结果	`--port 4173`（指定预览端口）

5. Vite 配置文件（vite.config.ts）

Vite 支持零配置，但复杂项目需要自定义配置Vite。以下是常用配置示例：

typescript

运行

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // Vue 插件
import path from 'path'

export default defineConfig({
  plugins: [vue()], // 插件配置
  server: {
    port: 3000, // 开发服务器端口
    open: true, // 自动打开浏览器
    proxy: { // 接口代理
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: 'dist', // 输出目录
    assetsDir: 'assets', // 静态资源目录
    sourcemap: true // 生成 sourcemap
  },
  resolve: {
    alias: { // 路径别名
      '@': path.resolve(__dirname, 'src')
    }
  },
  css: { // CSS 配置
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/variables.scss";'
      }
    }
  }
})

6. 常用插件与扩展

Vite 插件基于 Rollup 插件 API，以下是常用插件：

表格

插件	作用	安装命令
`@vitejs/plugin-vue`	支持 Vue 单文件组件	`npm install -D @vitejs/plugin-vue`
`@vitejs/plugin-react`	支持 React（自动处理 JSX）	`npm install -D @vitejs/plugin-react`
`vite-plugin-pwa`	支持 PWA（渐进式 Web 应用）	`npm install -D vite-plugin-pwa`
`vite-plugin-eslint`	集成 ESLint 代码检查	`npm install -D vite-plugin-eslint`
`vite-plugin-svg-icons`	处理 SVG 图标	`npm install -D vite-plugin-svg-icons`

7. 实战示例：创建 Vue 3 + TypeScript 项目

bash

运行

# 1. 创建项目
pnpm create vite@latest vue3-vite-demo -- --template vue-ts
# 2. 进入项目目录
cd vue3-vite-demo
# 3. 安装依赖
pnpm install
# 4. 启动开发服务器
pnpm run dev
# 5. 生产环境打包
pnpm run build
# 6. 预览打包结果
pnpm run preview

五、Vite vs Webpack 核心区别对比表

表格

对比维度	Vite	Webpack
开发模式	基于原生 ESM，按需编译，无打包	基于 Bundle，启动时打包所有模块
冷启动速度	秒级（不随项目规模增长）	分钟级（随项目规模增长而变慢）
热更新速度	毫秒级（只更新修改模块）	秒级（需重新打包部分模块）
生产打包	使用 Rolldown（Rollup 升级版）	使用内置打包器
配置复杂度	低（开箱即用，零配置支持常见场景）	高（需手动配置 loader、plugin）
静态资源处理	内置支持，无需额外配置	需配置 file-loader、url-loader 等
TypeScript 支持	内置支持，无需额外配置	需配置 ts-loader 或 babel-loader
生态系统	快速增长，兼容大部分 Rollup 插件	成熟稳定，插件丰富
适用场景	现代前端项目，Vue/React/Svelte 等	复杂老项目，需要兼容旧浏览器

六、高频避坑指南

1. 浏览器兼容性问题

Vite 默认只支持现代浏览器（支持 ESM 的浏览器），如需兼容旧浏览器（如 IE11），需：

安装 @vitejs/plugin-legacy 插件
配置目标浏览器版本

typescript

运行

// vite.config.ts
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

2. 依赖预构建问题

Vite 会预构建第三方依赖，但某些特殊依赖可能导致预构建失败：

解决方法：在 optimizeDeps 中配置排除或包含特定依赖

typescript

运行

export default defineConfig({
  optimizeDeps: {
    exclude: ['some-package'], // 排除不需要预构建的依赖
    include: ['another-package'] // 强制预构建的依赖
  }
})

3. 路径别名配置

使用 TypeScript 时，需同步配置 tsconfig.json 的 paths 选项，否则 IDE 会报错：

json

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

4. 环境变量使用

Vite 环境变量需以 VITE_ 为前缀，否则无法在客户端代码中访问：

bash

运行

# .env.development
VITE_API_URL=http://localhost:8080/api

在代码中使用：

javascript

运行

console.log(import.meta.env.VITE_API_URL)

5. 静态资源处理

public/ 目录下的文件：直接通过绝对路径访问，如 /favicon.ico
src/assets/ 目录下的文件：通过模块导入，如 import logo from '@/assets/logo.png'

七、最佳实践

优先使用官方模板：通过 create vite 创建项目，避免手动配置错误
合理使用环境变量：区分开发、测试、生产环境，避免硬编码配置
优化依赖预构建：排除不需要预构建的依赖，减少启动时间
使用路径别名：简化导入路径，提高代码可读性
配置静态资源处理：合理区分 public/ 和 src/assets/ 目录
集成代码检查工具：如 ESLint、Prettier，保证代码质量
使用插件扩展功能：如 PWA、SVG 图标、自动导入等，提升开发效率

八、总结口诀

Vite 出现为提速，传统打包太痛苦
开发 ESM 按需编，生产 Rolldown 优化建
秒级启动真畅快，热更新快到看不见
零配开箱就能用，插件生态很轻松
index.html 是入口，环境变量 VITE_ 开头
现代项目选 Vite，老项目兼容 Webpack

需要我给你写一个 Vite + Vue 3 + Pinia + Vue Router 的完整实战项目模板，直接可以拿来集成到项目中吗？

← 返回课程首页