Vite

技术栈

工具链

vitebuild-toolhmresmbundler前端

概览

Vite 技术栈概览

Vite 是尤雨溪打造的下一代前端构建工具，利用浏览器原生 ESM 实现秒级冷启动和毫秒级 HMR，已成为 Vue/React/Svelte 项目的事实标准构建方案。

解决什么问题

告别 Webpack 慢启动：大型项目 Webpack 启动几十秒，Vite 冷启 <1s
原生 ESM：开发环境直接使用浏览器 ES Module，无需打包
HMR 极速：模块热替换与项目规模无关，始终快速
统一构建：开发用 esbuild（Go），生产用 Rollup，兼顾速度与优化

关键特性

开箱即用：TypeScript / JSX / CSS Preprocessors / WASM 零配置
插件系统：兼容 Rollup 插件，Vite 专属插件生态丰富
SSR 支持：内置 SSR 模块，Next/Nuxt 底层均基于 Vite
Library Mode：一键构建库，ES/UMD/CJS 多格式输出
Glob Import：import.meta.glob 批量导入，动态路由/多语言等场景利器
VitePress：基于 Vite 的静态站点生成器，写文档神器

毕设场景

任何现代前端毕设的开发服务器（Vue/React/Svelte 项目标配）
组件库开发（Library Mode）
配合 Vitest 做单元测试
替代 CRA（已不推荐）、Webpack 等老方案

安装

Vite 安装指南

1. 环境准备

Node.js：>= 18.x（Vite 5+ 要求）
包管理器：npm / yarn / pnpm / bun
IDE：VS Code（任意前端插件）

2. 安装命令

创建项目

# 交互式创建
npm create vite@latest my-app

# 或直接指定模板
npm create vite@latest my-vue-app -- --template vue-ts
npm create vite@latest my-react-app -- --template react-ts
npm create vite@latest my-svelte-app -- --template svelte-ts
npm create vite@latest my-vanilla-app -- --template vanilla-ts

# 可用模板：vanilla | vue | react | preact | lit | svelte | solid
#           vanilla-ts | vue-ts | react-ts | preact-ts | lit-ts | svelte-ts | solid-ts

启动

cd my-app
npm install
npm run dev
# → http://localhost:5173

构建

npm run build     # 生产构建，输出到 dist/
npm run preview   # 预览生产构建

常用插件

# Vue
npm i -D @vitejs/plugin-vue
# React
npm i -D @vitejs/plugin-react
# Svelte
npm i -D @vitejs/plugin-svelte

3. 常见安装问题

Q: npm create vite 很慢？
A: 首次创建需下载模板；换 pnpm：pnpm create vite；设镜像

Q: HMR 不生效？
A: 确认 vite.config.js 中 server.hmr 未禁用；某些 Docker/WSL 环境需 server: { watch: { usePolling: true } }

Q: Vite vs Webpack 怎么选？
A: 毕设一律用 Vite（速度快 10-100 倍）。Webpack 仅用于维护老项目

Q: 构建后路径问题？
A: vite.config.js 中设置 base: './' 解决相对路径部署问题

示例

Vite 多框架快速启动

目标

展示 Vite 的模板系统 —— 同一命令创建 Vue/React/Svelte 项目，演示秒级冷启动和 HMR 热更新。

操作步骤

1. 创建三个项目

# Vue 项目
npm create vite@latest vite-vue -- --template vue-ts
cd vite-vue &;& npm install && cd ..

# React 项目
npm create vite@latest vite-react -- --template react-ts
cd vite-react &;& npm install && cd ..

# Svelte 项目
npm create vite@latest vite-svelte -- --template svelte-ts
cd vite-svelte &;& npm install && cd ..

2. 各项目入口代码

`vite-vue/src/App.vue`

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <div style="text-align:center;padding:2rem;font-family:system-ui">
    <h1 style="color:#42b883">⚡ Vite + Vue 3</h1>
    <p style="font-size:3rem;font-weight:bold">{{ count }}</p>
    <button @click="count++" style="padding:8px 20px;background:#42b883;color:white;border:none;border-radius:6px;cursor:pointer">
      点击 +1
    </button>
  </div>
</template>

`vite-react/src/App.tsx`

import { useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)
  return (
    <div style={{ textAlign: 'center', padding: '2rem', fontFamily: 'system-ui' }}>
      <h1 style={{ color: '#61dafb' }}>⚡ Vite + React</h1>
      <p style={{ fontSize: '3rem', fontWeight: 'bold' }}>{count}</p>
      <button onClick={() => setCount(c => c + 1)}
        style={{ padding: '8px 20px', background: '#61dafb', color: '#000', border: 'none', borderRadius: 6, cursor: 'pointer' }}>
        点击 +1
      </button>
    </div>
  )
}

`vite-svelte/src/App.svelte`

<script lang="ts">
  let count = 0
</script>

<div style="text-align:center;padding:2rem;font-family:system-ui">
  <h1 style="color:#ff3e00">⚡ Vite + Svelte</h1>
  <p style="font-size:3rem;font-weight:bold">{count}</p>
  <button on:click={() => count += 1}
    style="padding:8px 20px;background:#ff3e00;color:white;border:none;border-radius:6px;cursor:pointer">
    点击 +1
  </button>
</div>

3. 启动体验

# 分别在三个目录运行
npm run dev

# 观察：
# - 冷启动 < 1s（Webpack 需要 10-30s）
# - 修改代码后 HMR < 100ms
# - 三个框架统一命令、统一端口

预期输出

框架	URL	冷启动	HMR
Vue 3	localhost:5173	< 1s	< 100ms
React	localhost:5174	< 1s	< 100ms
Svelte	localhost:5175	< 1s	< 100ms

Vite 真正实现了框架无关的极速开发体验。

教程

Vite — 下一代前端构建

背景

Vite（法语"快"）是尤雨溪打造的下一代前端构建工具。开发时利用浏览器原生 ES Module 实现秒级冷启动，生产构建用 Rollup 优化。

核心概念

1. 为什么 Vite 快？

阶段	Webpack	Vite
冷启动	全量打包 → 10-30s	原生 ESM，按需编译 → <1s
HMR	增量编译，大型项目也慢	与模块数无关，始终 <100ms
构建	Webpack/Rollup	Rollup + esbuild

2. esbuild 预构建

依赖（node_modules）用 esbuild 预打包为 ESM，速度比传统打包器快 10-100 倍。你不需要手动配置 esbuild。

3. 开箱即用

// TypeScript — 零配置
// JSX/TSX — 零配置
// CSS Modules — .module.css 自动识别
// PostCSS — postcss.config.js
// WASM — 直接 import
// Web Workers — new Worker()
// Env Variables — import.meta.env

4. 配置自定义

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080'  // 代理后端
    }
  },
  build: {
    target: 'es2020',
    outDir: 'dist',
  }
})

5. 环境变量

.env                # 所有环境
.env.development    # npm run dev
.env.production     # npm run build

// 使用（仅 VITE_ 前缀暴露给客户端）
const apiUrl = import.meta.env.VITE_API_URL

分步操作

# 创建项目
npm create vite@latest my-app -- --template vue-ts

# 安装依赖
cd my-app &;& npm install

# 启动开发
npm run dev

# 构建
npm run build &;& npm run preview

思考题

Vite 开发时用 esbuild，构建时用 Rollup，为什么这样分工？
import.meta.glob 的用法和场景？
Vite 的 Library Mode 如何配置？

毕设场景

所有现代前端项目的开发服务器
NPM 组件库开发（Library Mode）
VitePress 写毕设文档

参考资料

[1] Evan You & Vite Team. Vite 官方文档. 2024. https://vitejs.dev
[2] Evan You. Vite 为什么这么快. 2023. https://vitejs.dev/guide/why.html
[3] Evan You. VitePress 静态站点生成器. 2024. https://vitepress.dev