Vite 的配置文件 vite.config.ts（或 vite.config.js）是项目的"控制中心"，所有构建行为都可以在这里自定义。本章我们系统学习配置文件的每一个常用选项。

配置文件基础 💎

文件类型 💎

Vite 支持 TypeScript 与 JavaScript 两种配置方式：

在实际项目中，不同环境（开发、测试、生产）通常需要不同的配置：API 地址、密钥、是否开启调试等。Vite 内置了完善的环境变量与模式管理机制。

环境变量分类 💎

Vite 项目中通常有三类环境变量：

Vite 对静态资源（图片、字体、视频、音频等）有非常完善的支持。本章我们系统学习 Vite 的静态资源处理方式。

资源处理方式 💎

Vite 中处理静态资源主要有以下几种方式：

Vite 原生支持 SCSS / Less / Stylus 等主流 CSS 预处理器，无需额外配置即可直接使用。本章我们学习如何与 PostCSS 协同工作，打造一个强大的 CSS 工程化方案。

一、原生支持 💎

Vite 内置了对以下预处理器的支持（仅需安装对应编译器）：

在 Vite 项目中，路径别名（alias）和开发代理（proxy）是两个高频使用的配置。本章我们详细学习它们的配置方式与最佳实践。

一、路径别名 💎

路径别名可以让我们使用 @/components/Button 替代 src/components/Button，让代码更清晰、维护更方便。

配置 alias 💎

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

export default defineConfig({
  resolve: {
    alias: {
      // 简写
      '@': path.resolve(__dirname, 'src'),
      // 等价于（推荐写法，跨平台兼容）
      // '@': fileURLToPath(new URL('./src', import.meta.url)),

      // 自定义别名
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@views': path.resolve(__dirname, 'src/views'),
      '@styles': path.resolve(__dirname, 'src/styles'),
    },
  },
})

Vite 的插件生态非常丰富，合适的插件可以极大提升开发效率。本章推荐一些社区最流行、最实用的 Vite 插件。

一、官方核心插件 💎

@vitejs/plugin-vue（Vue 必备） 💎

Vue 3 官方插件，提供 SFC 单文件组件支持。

pnpm add -D @vitejs/plugin-vue

Vite 开发体验已经够快，但生产环境的产物质量同样重要。本章我们学习如何分析和优化 Vite 打包结果，让应用又快又小。

一、基本打包 💎

# 生产环境打包
pnpm build

# 打包 + 本地预览
pnpm preview

# 打包并分析体积
pnpm build --mode analyze

HMR（Hot Module Replacement，热模块替换）是现代前端开发体验的核心特性。本章我们深入学习 Vite HMR 的原理、配置、API 以及常见问题的解决方案。

一、HMR 是什么 💎

HMR 允许在运行时更新各种模块，而无需进行完全刷新（Full Reload）。它有以下优势：

• 保留应用状态：修改组件样式 / 模板时，页面状态不会丢失
• 即时反馈：保存代码后立即看到效果
• 提升开发效率：避免每次修改都重新加载整个应用

什么是 Vite 💎

Vite（发音为 /vit/，类似法语单词 veut，意为"快"）是一种新型前端构建工具，由 Vue.js 作者 尤雨溪（Evan You） 开发，目前已经成为前端领域最流行的构建工具之一。

Vite 能够显著提升前端开发体验，主要包括：

1. 极速的开发服务器启动：使用原生 ESM（ES Modules）实现，无需打包即可启动
2. 即时的热模块替换（HMR）：无论项目大小，HMR 都能保持快速
3. 真正的按需编译：只在浏览器请求时按需转译文件
4. 开箱即用：内置 TypeScript、JSX、CSS Modules、PostCSS 等支持
5. 生产环境优化：基于 Rollup 进行生产打包，自动分割代码、资源优化

环境要求 💎

在开始安装 Vite 之前，请确保你的开发环境满足以下条件：