跳至主要內容

常用插件推荐

刘春龙原创2026/9/9...大约 6 分钟WEB前端Vite教程文档

常用插件推荐 :puzzle:

Vite 的插件生态非常丰富，合适的插件可以极大提升开发效率。本章推荐一些社区最流行、最实用的 Vite 插件。

一、官方核心插件 💎

@vitejs/plugin-vue（Vue 必备） 💎

Vue 3 官方插件，提供 SFC 单文件组件支持。

pnpm add -D @vitejs/plugin-vue
// vite.config.ts
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

@vitejs/plugin-react（React 必备） 💎

React 官方插件，提供 JSX / TSX 支持。

pnpm add -D @vitejs/plugin-react
// vite.config.ts
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

@vitejs/plugin-react-swc

使用 SWC 替代 Babel，速度更快（10x）：

pnpm add -D @vitejs/plugin-react-swc

@vitejs/plugin-vue-jsx 💎

支持 Vue 3 的 JSX / TSX 语法。

pnpm add -D @vitejs/plugin-vue-jsx
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vueJsx()],
})
// 支持 JSX
export default function App() {
  return <div>Hello JSX</div>
}

二、UnoCSS / Tailwind 💎

UnoCSS（强烈推荐） 💎

UnoCSS 是 Vite 生态最流行的原子化 CSS 引擎，比 Tailwind 更快、更灵活。

pnpm add -D unocss
// vite.config.ts
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [UnoCSS()],
})
// uno.config.ts
import { defineConfig, presetUno, presetAttributify, presetIcons, presetWebFonts } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),         // Tailwind / Windi 兼容
    presetAttributify(), // 属性化模式
    presetIcons(),       // 海量图标
    presetWebFonts({     // 在线字体
      provider: 'none',
    }),
  ],
  shortcuts: {
    // 自定义快捷类
    'btn': 'px-4 py-2 rounded inline-block bg-blue-500 text-white cursor-pointer',
    'btn-red': 'btn bg-red-500',
  },
  theme: {
    colors: {
      primary: '#2c3e50',
    },
  },
})
// main.ts
import 'virtual:uno.css'
<template>
  <!-- 原子化类名 -->
  <div class="flex items-center justify-center text-lg text-primary">
    <button class="btn-red">按钮</button>
  </div>
</template>

@tailwindcss/vite（Tailwind v4） 💎

Tailwind CSS 4 提供了 Vite 专属插件：

pnpm add -D tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})
/* src/styles/index.css */
@import "tailwindcss";

三、组件自动导入 💎

unplugin-auto-import（API 自动导入） 💎

自动导入 Vue / React 的常用 API，无需手动 import。

pnpm add -D unplugin-auto-import
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      // 生成 d.ts 类型文件
      dts: 'src/auto-imports.d.ts',
      // ESLint 兼容
      eslintrc: {
        enabled: true,
      },
    }),
  ],
})
<!-- 不用再写 import { ref, computed } from 'vue' -->
<template>
  <div>{{ count }}</div>
</template>

<script setup lang="ts">
const count = ref(0)  // 直接使用
const double = computed(() => count.value * 2)
</script>

unplugin-vue-components（组件自动导入） 💎

自动注册组件，无需手动 import。

pnpm add -D unplugin-vue-components
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      // 自动扫描的目录
      dirs: ['src/components'],
      // UI 库按需引入（Element Plus / Ant Design Vue）
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts',
    }),
  ],
})
<!-- 不用再写 import Button from '@/components/Button.vue' -->
<template>
  <div>
    <Button>按钮</Button>
    <el-button>Element Plus 按钮</el-button>
  </div>
</template>

四、路由与状态管理自动导入 💎

vue-router 配合 unplugin-auto-import 💎

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        {
          'vue-router': ['useRouter', 'useRoute', 'useLink'],
        },
        'pinia',
      ],
    }),
  ],
})

五、图标 💎

unplugin-icons 💎

按需使用 100+ 套图标库（Element Plus、Ant Design、Material Design 等）。

pnpm add -D unplugin-icons
// vite.config.ts
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Icons({
      autoInstall: true,  // 自动安装用到的图标包
    }),
    Components({
      resolvers: [
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
    }),
  ],
})
<template>
  <!-- 自动按需加载图标组件 -->
  <IconMdiAccountCircle />
  <IconEpHomeFilled />
</template>

vite-plugin-svg-icons 💎

把本地 SVG 注册为 icon 组件。

pnpm add -D vite-plugin-svg-icons
// vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'node:path'

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[name]',
    }),
  ],
})
// main.ts
import 'virtual:svg-icons-register'
<template>
  <svg class="icon">
    <use xlink:href="#icon-user" />
  </svg>
</template>

六、代码质量 💎

@vitejs/plugin-legacy（兼容旧浏览器） 💎

让 Vite 自动产出 ES5 兼容代码，兼容 IE11 等老旧浏览器。

pnpm add -D @vitejs/plugin-legacy
// vite.config.ts
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['ie >= 11', 'chrome >= 52'],
    }),
  ],
})

vite-plugin-eslint 💎

构建时自动进行 ESLint 检查。

pnpm add -D vite-plugin-eslint
// vite.config.ts
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    eslintPlugin({
      include: ['src/**/*.ts', 'src/**/*.vue'],
      cache: false,
    }),
  ],
})

vite-plugin-checker 💎

开发时显示 TypeScript / ESLint 错误。

pnpm add -D vite-plugin-checker
// vite.config.ts
import checker from 'vite-plugin-checker'

export default defineConfig({
  plugins: [
    checker({
      typescript: true,
      eslint: true,
      stylelint: true,
    }),
  ],
})

七、Mock 数据 💎

vite-plugin-mock 💎

在 Vite 中轻松接入 Mock 数据。

pnpm add -D vite-plugin-mock mockjs
// vite.config.ts
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    viteMockServe({
      enable: true,
      mockPath: 'mock',
    }),
  ],
})
// mock/user.ts
import { MockMethod } from 'vite-plugin-mock'

export default [
  {
    url: '/api/user/info',
    method: 'get',
    response: () => {
      return {
        code: 0,
        data: {
          id: 1,
          name: '张三',
        },
      }
    },
  },
] as MockMethod[]

八、构建优化 💎

rollup-plugin-visualizer（包体积分析） 💎

可视化分析打包后的体积分布。

pnpm add -D rollup-plugin-visualizer
// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      open: true,                 // 自动打开
      gzipSize: true,
      brotliSize: true,
      filename: 'dist/stats.html',
    }),
  ],
})

vite-plugin-compression（Gzip 压缩） 💎

构建时生成 .gz 文件，配合 nginx 启用 gzip 压缩。

pnpm add -D vite-plugin-compression
// vite.config.ts
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    compression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240,  // 大于 10KB 才压缩
      deleteOriginFile: false,
    }),
  ],
})

vite-plugin-cdn-import 💎

把大型库通过 CDN 加载，减小打包体积。

pnpm add -D vite-plugin-cdn-import
// vite.config.ts
import { cdnImport } from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    cdnImport({
      modules: [
        {
          name: 'echarts',
          var: 'echarts',
          path: 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js',
        },
        {
          name: 'lodash',
          var: '_',
          path: 'https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js',
        },
      ],
    }),
  ],
})

九、PWA（渐进式 Web 应用） 💎

vite-plugin-pwa 💎

为 Vite 项目添加 PWA 能力（离线访问、添加到桌面等）。

pnpm add -D vite-plugin-pwa
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: '我的应用',
        short_name: 'MyApp',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
        theme_color: '#ffffff',
        background_color: '#ffffff',
        display: 'standalone',
      },
      workbox: {
        // 缓存策略
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/api\.example\.com\//,
            handler: 'NetworkFirst',
            options: {
              cacheName: 'api-cache',
              expiration: {
                maxEntries: 100,
                maxAgeSeconds: 60 * 60 * 24 * 7, // 7 天
              },
            },
          },
        ],
      },
    }),
  ],
})

十、Gzip / Brotli 压缩（Vite 5+） 💎

Vite 5+ 内置了构建时压缩能力：

// vite.config.ts
export default defineConfig({
  build: {
    // 生成 .gz 文件
    // 通过环境变量控制：
    // VITE_BUILD_GZIP=1
  },
})

推荐使用 vite-plugin-compression 以获得更灵活的配置。

十一、调试与诊断 💎

vite-plugin-inspect 💎

可视化查看 Vite 的插件执行流程。

pnpm add -D vite-plugin-inspect
// vite.config.ts
import inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [inspect()],
})

启动后访问 http://localhost:5173/__inspect/ 即可看到插件执行流程。

推荐插件清单 💎

下面是一份生产环境推荐的插件清单：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import UnoCSS from 'unocss/vite'
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 vueDevTools from 'vite-plugin-vue-devtools'
import { visualizer } from 'rollup-plugin-visualizer'
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    UnoCSS(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      resolvers: [ElementPlusResolver()],
      dts: 'src/auto-imports.d.ts',
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({ prefix: 'Icon' }),
      ],
      dts: 'src/components.d.ts',
    }),
    Icons({ autoInstall: true }),
    vueDevTools(),
    visualizer({ open: true, filename: 'dist/stats.html' }),
    compression({ algorithm: 'gzip', ext: '.gz' }),
  ],
})

常见问题 💎

插件安装失败 👻

# 清理缓存
rm -rf node_modules pnpm-lock.yaml
pnpm install

插件与 Vite 版本不兼容 👻

# 查看插件兼容版本
pnpm view <plugin-name> peerDependencies

插件冲突 👻

不同插件可能改写同一类文件，按以下顺序排查：

  1. 关闭非核心插件，定位问题
  2. 查看插件的 apply 选项（'build' / 'serve' / 'all'）
  3. 调整插件在 plugins 数组中的顺序

小结

本章我们学习了 Vite 生态最实用的插件：

  • 官方核心：Vue / React / JSX 支持
  • UnoCSS / Tailwind：原子化 CSS
  • 自动导入：API + 组件 + 图标
  • 代码质量：ESLint、TypeScript 检查
  • 构建优化：体积分析、CDN、Gzip 压缩
  • PWA：离线访问能力
  • Mock：开发数据模拟

下一章我们将学习 打包与优化。

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。

最近更新:
贡献者: 刘春龙
嘉美开发社区 https://jiameisq.top
Copyright © 2026 刘春龙