Vite 插件
提升开发体验的 Vite 插件集合，优化构建流程和开发效率。
📋 已完成的工具页面
🗂️ 完整插件分类
🚀 开发体验
- 自动导入: ✅ 已完成 - unplugin-auto-import, unplugin-vue-components
- 组件库按需导入: unplugin-vue-components (Element Plus, Ant Design Vue, Naive UI)
- 图标自动导入: unplugin-icons, vite-plugin-svg-icons
- API 自动导入: unplugin-auto-import (Vue, Vue Router, Pinia, VueUse)
- 热更新增强: vite-plugin-restart, vite-plugin-full-reload
📦 构建优化
- 压缩: vite-plugin-compression (Gzip, Brotli)
- 图片优化: vite-plugin-imagemin, vite-plugin-image-optimizer
- 代码分割: vite-plugin-chunk-split
- CDN 加速: vite-plugin-cdn-import
- 打包分析: rollup-plugin-visualizer
- 移除 console: vite-plugin-remove-console
🎨 UI/样式
- SVG 组件: vite-svg-loader, vite-plugin-svg-icons
- UnoCSS: @unocss/vite
- Tailwind CSS: 内置支持
- CSS 预处理器: 内置支持 (Sass, Less, Stylus)
- PostCSS: 内置支持
📝 文档与类型
- Markdown: vite-plugin-md, vite-plugin-vue-markdown
- 类型检查: vite-plugin-checker (TypeScript, ESLint, Stylelint)
- API 文档: vite-plugin-api-doc
- 组件文档: vitepress, histoire
🔧 工具集成
- Mock 数据: vite-plugin-mock, vite-plugin-fake-server
- 环境变量: vite-plugin-env-compatible
- PWA: vite-plugin-pwa
- Electron: vite-plugin-electron
- SSR: vite-plugin-ssr, vite-ssr
🌐 框架集成
- Vue: @vitejs/plugin-vue, @vitejs/plugin-vue-jsx
- React: @vitejs/plugin-react, @vitejs/plugin-react-swc
- Svelte: @sveltejs/vite-plugin-svelte
- Solid: vite-plugin-solid
- Preact: @preact/preset-vite
📊 性能监控
- 性能分析: vite-plugin-inspect
- 打包分析: rollup-plugin-visualizer
- 构建报告: vite-plugin-build-info
- 依赖分析: vite-plugin-deps
🔐 安全与优化
- 代码混淆: vite-plugin-obfuscator
- License 检查: vite-plugin-license
- 环境变量加密: vite-plugin-env-encryption
- 资源内联: vite-plugin-inline
🧪 测试与调试
- 单元测试: vitest
- E2E 测试: @vitejs/plugin-legacy
- 调试工具: vite-plugin-debug
- 错误追踪: vite-plugin-sentry
🎯 特殊功能
- 国际化: vite-plugin-i18n, vite-plugin-vue-i18n
- 路由生成: vite-plugin-pages, vite-plugin-vue-router
- 布局系统: vite-plugin-vue-layouts
- 元数据: vite-plugin-html, vite-plugin-meta
- 注入脚本: vite-plugin-inject
💡 使用建议
基础配置
适合大多数 Vue 3 项目的基础插件配置：
typescript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router', 'pinia']
}),
Components({
dirs: ['src/components']
})
]
})进阶配置
包含性能优化和开发体验增强：
typescript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import compression from 'vite-plugin-compression'
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
vue(),
// 自动导入
AutoImport({
imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
resolvers: [ElementPlusResolver()],
dts: 'src/auto-imports.d.ts'
}),
// 组件自动导入
Components({
resolvers: [ElementPlusResolver()],
dts: 'src/components.d.ts'
}),
// Gzip 压缩
compression({
algorithm: 'gzip',
ext: '.gz'
}),
// 打包分析
visualizer({
open: true,
gzipSize: true,
brotliSize: true
})
]
})完整配置
生产级项目的完整配置：
typescript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import compression from 'vite-plugin-compression'
import { visualizer } from 'rollup-plugin-visualizer'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import viteImagemin from 'vite-plugin-imagemin'
import { VitePWA } from 'vite-plugin-pwa'
import path from 'path'
export default defineConfig({
plugins: [
vue(),
vueJsx(),
// 自动导入 API
AutoImport({
imports: [
'vue',
'vue-router',
'pinia',
'@vueuse/core'
],
resolvers: [
ElementPlusResolver(),
IconsResolver()
],
dts: 'src/auto-imports.d.ts',
dirs: ['src/composables', 'src/utils'],
eslintrc: {
enabled: true
}
}),
// 自动导入组件
Components({
resolvers: [
ElementPlusResolver(),
IconsResolver({
enabledCollections: ['ep']
})
],
dts: 'src/components.d.ts',
dirs: ['src/components'],
directoryAsNamespace: true
}),
// 图标自动导入
Icons({
autoInstall: true
}),
// SVG 图标
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
symbolId: 'icon-[dir]-[name]'
}),
// 图片压缩
viteImagemin({
gifsicle: {
optimizationLevel: 7,
interlaced: false
},
optipng: {
optimizationLevel: 7
},
mozjpeg: {
quality: 80
},
pngquant: {
quality: [0.8, 0.9],
speed: 4
},
svgo: {
plugins: [
{
name: 'removeViewBox'
},
{
name: 'removeEmptyAttrs',
active: false
}
]
}
}),
// Gzip 压缩
compression({
algorithm: 'gzip',
ext: '.gz',
threshold: 10240,
deleteOriginFile: false
}),
// Brotli 压缩
compression({
algorithm: 'brotliCompress',
ext: '.br',
threshold: 10240,
deleteOriginFile: false
}),
// PWA
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'My App',
short_name: 'App',
theme_color: '#ffffff'
}
}),
// 打包分析
visualizer({
open: true,
gzipSize: true,
brotliSize: true
})
],
build: {
// 代码分割
rollupOptions: {
output: {
manualChunks: {
'vue-vendor': ['vue', 'vue-router', 'pinia'],
'element-plus': ['element-plus'],
'utils': ['lodash-es', 'dayjs']
}
}
},
// 压缩配置
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}
})🎯 选择建议
小型项目
- ✅ @vitejs/plugin-vue
- ✅ unplugin-auto-import
- ✅ unplugin-vue-components
中型项目
- ✅ 小型项目的所有插件
- ✅ vite-plugin-compression
- ✅ rollup-plugin-visualizer
- ✅ unplugin-icons
大型项目
- ✅ 中型项目的所有插件
- ✅ vite-plugin-imagemin
- ✅ vite-plugin-pwa
- ✅ vite-plugin-checker
- ✅ vite-plugin-svg-icons
📚 学习资源
官方文档
插件市场
社区资源
💡 贡献说明
本插件集持续更新中，如果你有推荐的 Vite 插件，欢迎贡献！
每个插件页面包含：
- 📦 插件介绍和特点
- 💻 安装和配置方式
- 🎯 使用示例（TypeScript）
- 📊 插件对比
- ✨ 最佳实践