Vite 是新一代前端构建工具，原生支持 TypeScript。Vite 使用 esbuild 编译 TypeScript，速度极快，开发体验优秀。
使用 Vite 创建 TypeScript 项目。
npm create vite@latest my-app -- --template vanilla-ts
或使用 React + TypeScript 模板。
npm create vite@latest my-app -- --template react-ts
或使用 Vue + TypeScript 模板。
npm create vite@latest my-app -- --template vue-ts
Vite TypeScript 项目的基本结构：
my-app/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
├── main.ts
└── vite-env.d.ts
Vite 生成的 tsconfig.json 配置。
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}
Vite 配置文件支持 TypeScript。
import { defineConfig } from "vite"
export default defineConfig({
server: {
port: 3000,
open: true
},
build: {
outDir: "dist",
sourcemap: true
}
})
Vite 支持路径映射。
import { defineConfig } from "vite"
import path from "path"
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
"@components": path.resolve(__dirname, "src/components"),
"@utils": path.resolve(__dirname, "src/utils")
}
}
})
tsconfig.json 中也需要配置路径映射。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
}
}
Vite 使用 esbuild 编译 TypeScript，不进行类型检查。需要单独运行类型检查。
npx tsc --noEmit
在 package.json 中添加类型检查脚本。
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"typecheck": "tsc --noEmit"
}
}
Vite 支持环境变量，需要类型声明。
interface ImportMetaEnv {
readonly VITE_API_URL: string
readonly VITE_APP_TITLE: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
使用环境变量。
console.log(import.meta.env.VITE_API_URL)
console.log(import.meta.env.VITE_APP_TITLE)
Vite 支持各种插件扩展功能。
npm install @vitejs/plugin-react --save-dev
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
export default defineConfig({
plugins: [react()]
})
npm install @vitejs/plugin-vue --save-dev
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
export default defineConfig({
plugins: [vue()]
})
Vite 开发服务器启动极快。
npm run dev
开发服务器支持热更新，修改代码后立即生效。
Vite 使用 Rollup 进行生产构建。
npm run build
构建输出到 dist 目录。
一个完整的 Vite + TypeScript 项目配置。
import { defineConfig } from "vite"
import path from "path"
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
"@components": path.resolve(__dirname, "src/components"),
"@utils": path.resolve(__dirname, "src/utils"),
"@types": path.resolve(__dirname, "src/types")
}
},
server: {
port: 3000,
open: true,
proxy: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true
}
}
},
build: {
outDir: "dist",
sourcemap: true,
rollupOptions: {
output: {
manualChunks: {
vendor: ["lodash", "axios"]
}
}
}
}
})
Vite 原生支持 TypeScript，使用 esbuild 编译，速度极快。Vite 配置文件支持 TypeScript。路径映射需要在 vite.config.ts 和 tsconfig.json 中同时配置。Vite 不进行类型检查，需要单独运行 tsc --noEmit。Vite 支持环境变量、插件和代理配置。Vite 开发服务器启动快，支持热更新。