title: Vite
titleTemplate: 下一代前端构建工具
layout: home
theme: dark

Vite ^{下一代前端开发与构建工具}

Vite 是一个面向现代 Web 项目的下一代前端开发与构建工具，致力于提供极速的开发服务器启动、细粒度的模块热更新，以及经过优化的生产构建输出。它基于原生 ES 模块，充分利用现代浏览器能力，为开发者带来更流畅、更高效的开发体验。

核心特性

• 极速的服务启动：通过原生 ESM 按需加载文件，无需等待整个项目打包完成。
• 高效的模块热更新（HMR）：仅更新被修改的模块，大幅减少开发过程中的等待时间。
• 开箱即用的 TypeScript / JSX / CSS 支持：内置了常用的 Web 开发语言与框架支持。
• 丰富且可扩展的插件生态：兼容 Rollup 插件接口，并提供了灵活扩展的插件 API。
• 统一开发与构建：同一套配置与模块体系，从开发到生产无缝切换。
• 多框架支持：适用于 Vue、React、Svelte、Solid 等主流前端框架。

快速开始

使用 Vite 创建新项目时，可以借助命令行工具选择对应的模板或手动配置。

# 使用 npm
npm create vite@latest my-app -- --template vue

# 使用 yarn
yarn create vite my-app --template vue

# 使用 pnpm
pnpm create vite my-app --template vue

进入项目目录并启动开发服务器：

cd my-app
npm install
npm run dev

启动后，终端会输出本地访问地址（通常为 http://localhost:5173），打开该地址即可看到项目的初始页面。

项目结构

一个使用 Vite 创建的项目通常如下所示：

├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.js
    ├── App.vue
    └── components/

• index.html：Vite 的入口文件，开发和构建阶段均以该文件为起点。
• vite.config.js：Vite 的配置文件，用于定义插件、别名、构建选项等。
• src/：存放项目源代码的目录。

常用命令

配置示例

在 vite.config.js 中，可以轻松配置路径别名、开发服务器代理和插件。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080'
    }
  }
})

为什么选择 Vite

Vite 重新定义了前端开发服务器的工作方式，它不预先打包整个应用，而是将模块细分为浏览器实际请求的文件并即时转换，从而提供了在大型项目中依然能够保持快速响应的能力。与此同时，Vite 基于 Rollup 实现了高度优化的静态资源构建流程，确保生产代码尽可能精简。

延伸阅读

• Vite 官方指南
• Vite 官方 GitHub 仓库
• Vite 插件搜索