Vite 概述与快速上手

Vite（法语"快速"）是新一代前端构建工具，由 Vue.js 作者尤雨溪创建。它利用浏览器原生 ES Module 和 esbuild 预构建实现极速开发服务器，生产构建则基于 Rollup 输出高度优化的静态资源。

1. 为什么选择 Vite

1.1 传统打包器的痛点

图表渲染中…

维度	Webpack	Vite
冷启动	打包所有模块后启动（慢）	按需编译，即刻启动（快）
HMR 速度	随项目规模线性增长	始终毫秒级（与规模无关）
配置复杂度	高（Loader/Plugin/Resolve）	低（开箱即用）
TypeScript	需要 ts-loader/babel	原生支持（esbuild 转译）
CSS 预处理器	需要配置 Loader	内置支持

1.2 核心架构

图表渲染中…

2. 快速上手

2.1 创建项目

bash

# npm
npm create vite@latest my-app -- --template react-ts

# pnpm（推荐）
pnpm create vite my-app --template vue-ts

# 可选模板
# vanilla / vue / react / preact / lit / svelte / solid / qwik
# 加 -ts 后缀使用 TypeScript

2.2 项目结构

code

my-app/
├── index.html          ← 入口（Vite 以此为核心）
├── package.json
├── vite.config.ts      ← 配置文件
├── tsconfig.json
├── public/             ← 静态资源（原样复制）
│   └── favicon.svg
└── src/
    ├── main.ts         ← JS 入口
    ├── App.vue         ← 根组件
    ├── style.css
    └── components/

index.html 是入口

与 Webpack 不同，Vite 以 index.html 为构建入口（而非 JS 文件）。HTML 中通过 <script type="module"> 引用源码：

html

<script type="module" src="/src/main.ts"></script>

2.3 启动开发

bash

cd my-app
pnpm install
pnpm dev

输出：

code

VITE v5.x.x  ready in 120 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.100:5173/

2.4 生产构建

bash

pnpm build     # 输出到 dist/
pnpm preview   # 本地预览构建产物

3. 核心概念

3.1 依赖预构建

Vite 首次启动时使用 esbuild 将 node_modules 中的依赖预构建为 ESM：

code

node_modules/
  lodash-es/          ← 数百个 ESM 文件
    ↓ esbuild 预构建
node_modules/.vite/
  deps/
    lodash-es.js      ← 合并为单个文件
    _metadata.json    ← 缓存哈希

预构建解决的问题：

CommonJS → ESM：浏览器不支持 CJS，需转换
性能：将数百个模块文件合并为少量文件，减少 HTTP 请求

3.2 模块热替换（HMR）

Vite 的 HMR 基于原生 ESM：

图表渲染中…

只失效修改模块及其影响链
不重新打包无关模块
大型项目也能保持毫秒级更新

3.3 环境变量

bash

# .env                ← 所有环境加载
VITE_APP_TITLE=My App

# .env.development    ← 仅开发环境
VITE_API_URL=http://localhost:3000

# .env.production     ← 仅生产环境
VITE_API_URL=https://api.example.com

代码中使用：

typescript

// 仅 VITE_ 前缀的变量暴露给客户端
const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV    // boolean
const isProd = import.meta.env.PROD  // boolean
const mode = import.meta.env.MODE    // 'development' | 'production'

安全提示

VITE_ 前缀的变量会被打包进客户端代码。不要在 .env 中存放密钥、Token 等敏感信息。

4. 与现有项目集成

4.1 替换 Webpack（渐进迁移）

bash

# 安装 Vite 和对应插件
pnpm add -D vite @vitejs/plugin-react

# 创建 vite.config.ts
# 将 index.html 移到项目根目录
# 修改 package.json scripts

json

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

4.2 作为库打包工具

typescript

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      formats: ['es', 'cjs', 'umd'],
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      external: ['vue', 'react'],
      output: {
        globals: { vue: 'Vue', react: 'React' }
      }
    }
  }
})

5. 常用命令

命令	说明
`vite`	启动开发服务器
`vite build`	生产构建
`vite preview`	预览构建产物
`vite optimize`	手动触发依赖预构建
`vite --port 3000`	指定端口
`vite --host`	暴露到局域网
`vite build --watch`	监听模式构建

6. 最佳实践

使用 pnpm

Vite 的依赖预构建对 pnpm 的符号链接结构有良好支持，且 pnpm 安装速度更快。

合理配置 server.proxy

开发时通过代理解决跨域，避免 CORS 配置：

typescript

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

避免在源码中引用 public/ 资源

public/ 中的文件不经过 Vite 处理（无 hash、无压缩优化）。优先将资源放在 src/ 中通过 import 引用。

Vite 概述与快速上手

1. 为什么选择 Vite

1.1 传统打包器的痛点

图表渲染中…

维度	Webpack	Vite
冷启动	打包所有模块后启动（慢）	按需编译，即刻启动（快）
HMR 速度	随项目规模线性增长	始终毫秒级（与规模无关）
配置复杂度	高（Loader/Plugin/Resolve）	低（开箱即用）
TypeScript	需要 ts-loader/babel	原生支持（esbuild 转译）
CSS 预处理器	需要配置 Loader	内置支持

1.2 核心架构

图表渲染中…

2. 快速上手

2.1 创建项目

bash

# npm
npm create vite@latest my-app -- --template react-ts

# pnpm（推荐）
pnpm create vite my-app --template vue-ts

# 可选模板
# vanilla / vue / react / preact / lit / svelte / solid / qwik
# 加 -ts 后缀使用 TypeScript

2.2 项目结构

code

my-app/
├── index.html          ← 入口（Vite 以此为核心）
├── package.json
├── vite.config.ts      ← 配置文件
├── tsconfig.json
├── public/             ← 静态资源（原样复制）
│   └── favicon.svg
└── src/
    ├── main.ts         ← JS 入口
    ├── App.vue         ← 根组件
    ├── style.css
    └── components/

index.html 是入口

与 Webpack 不同，Vite 以 index.html 为构建入口（而非 JS 文件）。HTML 中通过 <script type="module"> 引用源码：

html

<script type="module" src="/src/main.ts"></script>

2.3 启动开发

bash

cd my-app
pnpm install
pnpm dev

输出：

code

VITE v5.x.x  ready in 120 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.100:5173/

2.4 生产构建

bash

pnpm build     # 输出到 dist/
pnpm preview   # 本地预览构建产物

3. 核心概念

3.1 依赖预构建

Vite 首次启动时使用 esbuild 将 node_modules 中的依赖预构建为 ESM：

code

node_modules/
  lodash-es/          ← 数百个 ESM 文件
    ↓ esbuild 预构建
node_modules/.vite/
  deps/
    lodash-es.js      ← 合并为单个文件
    _metadata.json    ← 缓存哈希

预构建解决的问题：

CommonJS → ESM：浏览器不支持 CJS，需转换
性能：将数百个模块文件合并为少量文件，减少 HTTP 请求

3.2 模块热替换（HMR）

Vite 的 HMR 基于原生 ESM：

图表渲染中…

只失效修改模块及其影响链
不重新打包无关模块
大型项目也能保持毫秒级更新

3.3 环境变量

bash

# .env                ← 所有环境加载
VITE_APP_TITLE=My App

# .env.development    ← 仅开发环境
VITE_API_URL=http://localhost:3000

# .env.production     ← 仅生产环境
VITE_API_URL=https://api.example.com

代码中使用：

typescript

// 仅 VITE_ 前缀的变量暴露给客户端
const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV    // boolean
const isProd = import.meta.env.PROD  // boolean
const mode = import.meta.env.MODE    // 'development' | 'production'

安全提示

VITE_ 前缀的变量会被打包进客户端代码。不要在 .env 中存放密钥、Token 等敏感信息。

4. 与现有项目集成

4.1 替换 Webpack（渐进迁移）

bash

# 安装 Vite 和对应插件
pnpm add -D vite @vitejs/plugin-react

# 创建 vite.config.ts
# 将 index.html 移到项目根目录
# 修改 package.json scripts

json

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

4.2 作为库打包工具

typescript

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      formats: ['es', 'cjs', 'umd'],
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      external: ['vue', 'react'],
      output: {
        globals: { vue: 'Vue', react: 'React' }
      }
    }
  }
})

5. 常用命令

命令	说明
`vite`	启动开发服务器
`vite build`	生产构建
`vite preview`	预览构建产物
`vite optimize`	手动触发依赖预构建
`vite --port 3000`	指定端口
`vite --host`	暴露到局域网
`vite build --watch`	监听模式构建

6. 最佳实践

使用 pnpm

Vite 的依赖预构建对 pnpm 的符号链接结构有良好支持，且 pnpm 安装速度更快。

合理配置 server.proxy

开发时通过代理解决跨域，避免 CORS 配置：

typescript

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

避免在源码中引用 public/ 资源

public/ 中的文件不经过 Vite 处理（无 hash、无压缩优化）。优先将资源放在 src/ 中通过 import 引用。

Vite 概述与快速上手

1. 为什么选择 Vite

1.1 传统打包器的痛点

1.2 核心架构

2. 快速上手

2.1 创建项目

2.2 项目结构

2.3 启动开发

2.4 生产构建

3. 核心概念

3.1 依赖预构建

3.2 模块热替换（HMR）

3.3 环境变量

4. 与现有项目集成

4.1 替换 Webpack（渐进迁移）

4.2 作为库打包工具

5. 常用命令

6. 最佳实践

相关文档

Vite 概述与快速上手

1. 为什么选择 Vite

1.1 传统打包器的痛点

1.2 核心架构

2. 快速上手

2.1 创建项目

2.2 项目结构

2.3 启动开发

2.4 生产构建

3. 核心概念

3.1 依赖预构建

3.2 模块热替换（HMR）

3.3 环境变量

4. 与现有项目集成

4.1 替换 Webpack（渐进迁移）

4.2 作为库打包工具

5. 常用命令

6. 最佳实践

相关文档