什么是 Vite？
Vite 是一个基于原生 ES Modules 开发的前端构建工具，由 Evan You（Vue 的作者）开发。它最大的特点包括：
- 极速冷启动：因为利用了浏览器原生的 ES Modules，所以在开发时无需等待整个打包过程。
- 高效热更新（HMR）：文件变更后只更新改动部分，极大提升开发效率。
- 简单配置：大部分项目即开箱即用，同时也支持灵活的配置和插件扩展。
使用 Vite 创建 React 项目
1. 确保环境准备
- 安装 Node.js（建议使用 LTS 版本）。
- 终端支持
npm、yarn或pnpm之一。
2. 创建项目
在终端中执行以下命令即可通过 Vite 脚手架创建一个 React 项目模板：
使用 npm：
npm create vite@latest my-react-app -- --template react使用 yarn：
yarn create vite my-react-app --template react使用 pnpm：
pnpm create vite my-react-app --template react
上述命令会自动下载 Vite 模板，并生成一个名为 my-react-app 的项目目录。
3. 安装依赖
进入项目目录并安装依赖包：
cd my-react-app
npm install
# 或 yarn install / pnpm install
Vite 创建的 React 项目目录结构
创建完成后，项目的默认目录结构大致如下：
my-react-app/
├── node_modules/ # 依赖库
├── public/ # 公共静态资源（直接被浏览器访问）
│ ├── favicon.svg # 图标等资源文件
│ └── vite.svg # 示例图片
├── src/ # 源代码目录
│ ├── App.jsx # 根组件，主要的应用逻辑
│ ├── main.jsx # 应用入口文件，负责挂载 React 组件到 DOM
│ ├── index.css # 全局样式文件
│ └── vite-env.d.ts # Vite 默认提供的 TypeScript 类型声明（如果你使用 TypeScript，则包含在内）
├── .gitignore # Git 忽略文件
├── index.html # HTML 模板，Vite 会注入相关脚本和样式
├── package.json # 项目配置以及依赖声明
├── README.md # 项目说明文档
└── vite.config.js # Vite 配置文件，可在其中自定义构建、插件、服务器等配置
说明：
public/
放置静态资源，如图片、图标、manifest 等，Vite 不会对里面的资源做预处理，浏览器直接访问。src/
主要源码存放处。main.jsx作为入口文件，通过ReactDOM.render()（或 React 18 的createRoot）把App.jsx组件挂载到index.html中的 DOM 节点上。index.html
作为模板文件，Vite 将在构建时注入打包后的脚本和样式，你可以在此处添加 meta 标签、链接外部资源等。vite.config.js
配置文件用来定制 Vite 的行为，如插件配置、路径别名、开发服务器设置等。例如，可以配置插件@vitejs/plugin-react来增强 React 开发体验。
Vite 常用命令
在项目目录下，可以通过 package.json 中定义的脚本来运行常用命令：
启动开发服务器
npm run dev这会启动一个本地开发服务器（默认端口 3000 或其他可用端口），支持实时热更新（HMR），在你修改代码后页面会自动更新。
构建生产版本
npm run build该命令会把项目打包到
dist/目录下，使用 Rollup 进行构建和优化，生成用于部署的静态文件。预览生产构建
npm run preview在构建生产版本后，可通过该命令在本地启动一个模拟生产环境的服务器，方便你预览生产构建效果。
Vite 的自定义配置
在 vite.config.js 文件中，你可以进行各种自定义配置。例如：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': '/src', // 使用 @ 表示 src 目录
},
},
server: {
port: 3000,
open: true, // 启动后自动打开浏览器
},
});
常用配置包括：
- 插件配置：通过插件扩展 Vite 的功能，如支持 React 的 Fast Refresh、TypeScript、PWA 等。
- 路径别名：配置简化模块导入路径，提升可读性。
- 开发服务器设置：如端口号、代理设置、自动打开浏览器等。
- 构建选项：定制生产构建参数，如输出目录、代码分割、压缩等。
环境变量
Vite 支持基于 .env 文件的环境变量设置，需要注意的是环境变量名必须以 VITE_ 开头才能在客户端代码中访问。例如，在项目根目录下创建一个 .env 文件：
VITE_API_URL=https://api.example.com
然后在代码中通过 import.meta.env.VITE_API_URL 获取对应的值。
总结
- 快速创建： 使用 Vite 脚手架可以非常便捷地搭建一个 React 项目。
- 目录结构清晰：
public/和src/目录的划分让静态资源与源码分离。 - 高效开发： Vite 利用 ES Modules 实现极速启动和热更新，大大提升开发体验。
- 灵活配置： 通过
vite.config.js和插件系统，你可以根据项目需求自定义各种构建和运行选项。
你可以查阅 Vite 官方文档 获取更多使用细节和高级配置内容。这样你就能根据项目需求灵活配置和扩展了。