Vite 完整功能详解与 Vue 项目实战指南
Vite 是下一代前端开发工具,由 Vue 作者尤雨溪开发,提供极速的开发体验和高效的生产构建。以下是完整功能解析和实战示例:
一、Vite 核心功能亮点
-
闪电般冷启动
- 基于原生 ES 模块(ESM)按需编译
- 启动时间与项目大小无关
-
即时热更新(HMR)
- 毫秒级更新,保留应用状态
- 支持 Vue/JSX/CSS 的 HMR
-
开箱即用支持
- TypeScript
- JSX/TSX
- CSS 预处理器(Sass/Less/Stylus)
- PostCSS
- Web Assembly
-
优化构建
- 生产环境使用 Rollup 打包
- 自动代码分割
- 异步 chunk 优化
-
插件系统
- 兼容 Rollup 插件生态
- 官方插件:@vitejs/plugin-vue、@vitejs/plugin-react 等
二、完整 Vue 项目实战示例
项目结构
bash
my-vue-app/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ ├── components/
│ ├── store/ # Pinia 状态管理
│ ├── router/ # Vue Router
│ ├── views/
│ ├── App.vue
│ ├── main.js
│ └── style.css
├── .env # 环境变量
├── vite.config.js # Vite 配置
└── package.json
1. 创建项目
bash
npm create vite@latest
# 选择 Vue + TypeScript
cd my-vue-app
npm install
2. 配置 vite.config.js
javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
server: {
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`
}
}
},
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor'
}
}
}
}
}
})
3. 集成 Vue Router
bash
npm install vue-router@4
javascript
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
const routes = [
{ path: '/', component: Home },
{
path: '/user/:id',
component: () => import('@/views/User.vue'),
meta: { requiresAuth: true }
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
4. 集成 Pinia 状态管理
bash
npm install pinia
javascript
// src/store/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
name: 'Guest',
isAdmin: false
}),
actions: {
login(userData) {
this.name = userData.name
this.isAdmin = userData.isAdmin
}
},
getters: {
welcomeMessage: (state) => `Hello, ${state.name}!`
}
})
5. 组件示例 (带 TypeScript)
vue
<!-- src/components/UserCard.vue -->
<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
const welcomeMsg = computed(() => userStore.welcomeMessage)
defineProps<{
userId: number
showDetails: boolean
}>()
</script>
<template>
<div class="user-card">
<h3>{{ welcomeMsg }}</h3>
<slot name="header" />
<div v-if="showDetails">
<!-- 用户详情 -->
</div>
</div>
</template>
<style scoped>
.user-card {
border: 1px solid #eee;
padding: 1rem;
border-radius: 8px;
}
</style>
6. 环境变量配置
bash
# .env.development
VITE_API_BASE=http://localhost:3000/api
VITE_DEBUG_MODE=true
# .env.production
VITE_API_BASE=https://api.example.com
javascript
// 使用环境变量
const apiBase = import.meta.env.VITE_API_BASE
7. 性能优化技巧
- 动态导入组件
javascript
const UserProfile = defineAsyncComponent(() =>
import('@/components/UserProfile.vue')
)
- 图片资源处理
html
<!-- 自动转换小图片为 base64 -->
<img src="@/assets/logo.png" alt="Vite logo">
<!-- 使用 ?url 获取资源 URL -->
import largeImage from '@/assets/bg.jpg?url'
- 全局样式管理
scss
// src/styles/main.scss
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// vite.config.js 中全局引入
8. 高级功能实现
SSR 支持 (vite-plugin-ssr)
bash
npm install vite-plugin-ssr
javascript
// vite.config.js
import ssr from 'vite-plugin-ssr/plugin'
export default defineConfig({
plugins: [vue(), ssr()]
})
PWA 支持
bash
npm install vite-plugin-pwa
javascript
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'My Vue App',
short_name: 'VueApp',
theme_color: '#ffffff'
}
})
]
})
9. 调试与测试
json
// package.json
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "vitest",
"coverage": "vitest run --coverage"
}
10. 部署配置
javascript
// 静态部署 (GitHub Pages)
build: {
outDir: 'docs',
assetsDir: 'static'
}
// SPA 路由处理
export default defineConfig({
build: {
rollupOptions: {
input: {
main: path.resolve(__dirname, 'index.html'),
404: path.resolve(__dirname, '404.html')
}
}
}
})
三、Vite vs Webpack 优势对比
特性 | Vite | Webpack |
---|---|---|
启动速度 | 毫秒级 | 随项目增长线性下降 |
HMR 更新 | 局部更新 <50ms | 全量更新 >1s |
构建原理 | ESM 按需编译 + Rollup | Bundle 打包 |
配置复杂度 | 极简配置 | 复杂配置 |
TS 支持 | 原生支持 | 需要 loader |
开发体验 | 接近原生开发 | 有打包等待 |
四、最佳实践建议
- 路由懒加载:使用动态导入提升首屏速度
- CSS 模块化:避免全局样式污染
- Tree-shaking:确保组件库支持 ESM
- 按需导入:对大型库使用 unplugin-auto-import
- CDN 优化:通过 build.rollupOptions.external 分离依赖
javascript
// 自动导入示例 (vite.config.js)
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({
imports: [
'vue',
'vue-router',
'pinia'
],
dts: 'src/auto-imports.d.ts'
})
]
})
通过以上配置和示例,你可以快速构建一个现代化的 Vue 3 应用,享受 Vite 带来的极致开发体验!