环境搭建
pnpm安装
cnpm install -g pnpm
pnpm设置国内加速包
pnpm config set registry https://registry.npmmirror.com/
创建Vite项目
pnpm create vite
配置初始文件
在使用 Vite 的过程，我们需要对 Vite 做一些配置，以满足日常开发的需要。你可以通过两种方式来对 Vite 进行配置，一是通过命令行参数，如vite --port=8888，二是通过配置文件，一般情况下，大多数的配置都通过配置文件的方式来声明。
Vite 当中支持多种配置文件类型，包括.js、.ts、.mjs三种后缀的文件，实际项目中一般使用vite.config.ts作为配置文件，以脚手架项目中的配置为例，具体的配置代码如下:
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()]
})
可以看到配置文件中默认在 plugins 数组中配置了官方的 react 插件，来提供 React 项目编译和热更新的功能。
接下来，我们可以基于这个文件完成更加丰富的配置。之前我就遇到过这样一个需求: 页面的入口文件index.html并不在项目根目录下，而需要放到 src 目录下，如何在访问localhost:3000的时候让 Vite 自动返回 src 目录下的index.html呢？我们可以通过root参数配置项目根目录的位置:
// vite.config.ts
import { defineConfig } from 'vite'
// 引入 path 包注意两点:
// 1. 为避免类型报错，你需要通过 `pnpm i @types/node -D` 安装类型
// 2. tsconfig.node.json 中设置 `allowSyntheticDefaultImports: true`，以允许下面的 default 导入方式
import path from 'path'
import react from '@vitejs/plugin-react'
export default defineConfig({
// 手动指定项目根目录位置
root: path.join(__dirname, 'src')
plugins: [react()]
})
当手动指定root参数之后，Vite 会自动从这个路径下寻找index.html文件，也就是说当我直接访问 localhost:3000的时候，Vite 从src目录下读取入口文件，这样就成功实现了刚才的需求。
生产环境构建
有人说Vite因为其不打包的特性而不能上生产环境，其实这种观点是相当有误的。在开发阶段 Vite 通过 Dev Server 实现了不打包的特性，而在生产环境中，Vite 依然会基于 Rollup 进行打包，并采取一系列的打包优化手段。从脚手架项目的package.json中就可见一斑：
"scripts": {
// 开发阶段启动 Vite Dev Server
"dev": "vite",
// 生产环境打包
"build": "tsc && vite build",
// 生产环境打包完预览产物
"preview": "vite preview"
},
相信你已经注意到其中的build命令了，没错，这个命令就是 Vite 专门用来进行生产环境打包的。但可能你会有点疑惑，为什么在vite build命令执行之前要先执行tsc呢？
tsc 作为 TypeScript 的官方编译命令，可以用来编译 TypeScript 代码并进行类型检查，而这里的作用主要是用来做类型检查，我们可以从项目的tsconfig.json中注意到这样一个配置:
{
"compilerOptions": {
// 省略其他配置
// 1. noEmit 表示只做类型检查，而不会输出产物文件
// 2. 这行配置与 tsc --noEmit 命令等效
"noEmit": true,
},
}
虽然 Vite 提供了开箱即用的 TypeScript 以及 JSX 的编译能力，但实际上底层并没有实现 TypeScript 的类型校验系统，因此需要借助 tsc 来完成类型校验(在 Vue 项目中使用 vue-tsc 这个工具来完成)，在打包前提早暴露出类型相关的问题，保证代码的健壮性。
