Vite 常用插件详解与使用指南

Vite 常用插件详解与使用指南

根据最新的技术资料，整理了 Vite 常用插件的详细介绍和使用方法：

---

📋 插件总览

插件	用途	安装命令
@vitejs/plugin-vue	Vue 3 支持	npm i -D @vitejs/plugin-vue
@vitejs/plugin-react	React 支持	npm i -D @vitejs/plugin-react
vite-plugin-svg-icons	SVG 图标	npm i -D vite-plugin-svg-icons
vite-plugin-compression	Gzip 压缩	npm i -D vite-plugin-compression
unplugin-auto-import	自动导入	npm i -D unplugin-auto-import
unplugin-vue-components	组件自动注册	npm i -D unplugin-vue-components

---

🔧 各插件详细使用

1. @vitejs/plugin-vue - Vue 3 支持

作用：解析 Vue 3 单文件组件（SFC），是 Vue 3 + Vite 项目的核心插件

安装：

npm i -D @vitejs/plugin-vue

配置示例 (vite.config.ts)：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      // 可选配置
      script: {
        defineModel: true,  // 启用 defineModel
      },
      template: {
        compilerOptions: {
          // 自定义元素处理
          isCustomElement: tag => tag.startsWith('ion-')
        }
      }
    })
  ]
})

---

2. @vitejs/plugin-react - React 支持

作用：为 React 项目提供快速刷新（HMR）和 JSX 支持

安装：

npm i -D @vitejs/plugin-react

配置示例 (vite.config.ts)：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      // 可选配置
      include: '**/*.{jsx,tsx}',
      exclude: [],
      babel: {
        plugins: []  // 自定义 Babel 插件
      }
    })
  ]
})

---

3. vite-plugin-svg-icons - SVG 图标

作用：将 SVG 文件打包成 sprite 图标，支持按需加载，减少 HTTP 请求

安装：

npm i -D vite-plugin-svg-icons

配置示例 (vite.config.ts)：

import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定 symbolId 格式
      symbolId: 'icon-[dir]-[name]',
      // 自定义 DOM 操作
      customDomId: '__svg__icons__dom__',
    })
  ]
})

使用示例 (main.ts)：

// 注册 SVG 图标
import 'virtual:svg-icons-register'

组件中使用：

<template>
  <svg class="icon" aria-hidden="true">
    <use :xlink:href="`#icon-${iconName}`" />
  </svg>
</template>

---

4. vite-plugin-compression - Gzip 压缩

作用：构建时生成 .gz 或 .br 压缩文件，减少传输体积，提升加载速度

安装：

npm i -D vite-plugin-compression

配置示例 (vite.config.ts)：

import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // Gzip 压缩
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,  // 大于 10kb 的文件才压缩
      algorithm: 'gzip',
      ext: '.gz',
    }),
    // Brotli 压缩（压缩率更高）
    viteCompression({
      verbose: true,
      algorithm: 'brotliCompress',
      ext: '.br',
    })
  ]
})

Nginx 配置（启用压缩）：

gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1024;

---

5. unplugin-auto-import - API 自动导入

作用：自动导入 Vue/React API 和自定义函数，无需手动 import

安装：

npm i -D unplugin-auto-import

配置示例 (vite.config.ts)：

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      // 自动导入 Vue 相关 API
      imports: ['vue', 'vue-router', 'pinia'],
      // 自动导入自定义函数
      dirs: ['src/composables/**', 'src/utils/**'],
      // 生成 TypeScript 声明文件
      dts: 'src/auto-imports.d.ts',
      // ESLint 配置
      eslintrc: {
        enabled: true,
        filepath: './.eslintrc-auto-import.json',
      }
    })
  ]
})

使用效果：

<!-- 无需手动导入，可直接使用 -->
<script setup>
const count = ref(0)
const router = useRouter()
const store = useStore()
</script>

---

6. unplugin-vue-components - 组件自动注册

作用：自动注册 Vue 组件，无需手动 import 和注册

安装：

npm i -D unplugin-vue-components

配置示例 (vite.config.ts)：

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      // 组件目录
      dirs: ['src/components'],
      // 文件扩展名
      extensions: ['vue', 'md'],
      // 自动导入 UI 库组件
      resolvers: [
        ElementPlusResolver(),
        // AntDesignVueResolver(),
        // TDesignResolver(),
      ],
      // 生成 TypeScript 声明
      dts: 'src/components.d.ts',
    })
  ]
})

使用效果：

<template>
  <!-- 直接使用，无需导入 -->
  <MyComponent />
  <ElButton>按钮</ElButton>
</template>

---

🎯 完整配置示例

vite.config.ts** 完整示例**：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import viteCompression from 'vite-plugin-compression'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

export default defineConfig({
  plugins: [
    // Vue 3 支持
    vue(),
    
    // SVG 图标
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
    
    // Gzip 压缩
    viteCompression({
      verbose: true,
      algorithm: 'gzip',
      threshold: 10240,
    }),
    
    // API 自动导入
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dirs: ['src/composables/**', 'src/utils/**'],
      dts: 'src/auto-imports.d.ts',
      resolvers: [ElementPlusResolver()],
    }),
    
    // 组件自动注册
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts',
      resolvers: [ElementPlusResolver()],
    }),
  ],
  
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  },
  
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'element-plus': ['element-plus'],
        }
      }
    }
  }
})

---

📦 其他推荐插件

插件	用途	安装命令
vite-plugin-inspect	插件调试分析	npm i -D vite-plugin-inspect
rollup-plugin-visualizer	打包体积分析	npm i -D rollup-plugin-visualizer
vite-plugin-pwa	PWA 支持	npm i -D vite-plugin-pwa
vite-plugin-eslint	ESLint 检查	npm i -D vite-plugin-eslint
unplugin-icons	图标自动导入	npm i -D unplugin-icons

---

💡 最佳实践建议

1. 开发环境：优先配置自动导入类插件，提升开发效率
2. 生产环境：启用压缩插件，优化打包体积
3. TypeScript 项目 ：确保生成 .d.ts 声明文件
4. 大型项目：使用代码分割插件优化加载性能
5. 调试需求 ：配置 vite-plugin-inspect 分析插件执行

希望这份指南对您有帮助！