有哪些常见的Vite插件及其作用？

原创于 2025-12-08 11:14:38 发布 · 633 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #vite

vite 专栏收录该内容

2 篇文章

订阅专栏

了解 Vite 生态中常见的插件，以及这些插件各自的核心作用、基础用法和适用场景，这能帮助我们在 Vue3 + Vite 项目中根据需求选择合适的插件，提升开发效率、优化项目性能或解决特定场景的问题。

下面我会按「核心必备、开发提效、样式处理、性能优化、构建增强、其他实用」六大类，梳理高频插件，每个插件都包含核心作用、安装 / 配置和适用场景，新手也能快速理解和使用。

一、核心必备类（Vue3 + Vite 项目几乎必装）

这类插件是 Vite 适配 Vue 生态的基础，缺少会导致核心功能无法使用。

1. @vitejs/plugin-vue

核心作用：Vite 官方核心插件，实现 .vue 单文件组件（SFC）的编译解析，包括模板、脚本、样式的处理，是 Vue3 + Vite 项目的基石。

安装 & 配置（Vue3 项目创建时已自动配置）：

npm install @vitejs/plugin-vue -D

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

export default defineConfig({
  plugins: [vue()] // 无需额外配置，默认满足绝大部分场景
})

适用场景：所有 Vue3 + Vite 项目（必装）。

2. @vitejs/plugin-vue-jsx

核心作用：让 Vite 支持 Vue3 的 JSX/TSX 语法（比如用 <div>{count}</div> 替代模板语法），兼容 React 风格的 JSX 写法。

安装 & 配置：

npm install @vitejs/plugin-vue-jsx -D

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

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

适用场景：需要用 JSX 编写 Vue 组件（比如复杂逻辑的组件、迁移 React 项目到 Vue）。

3. @vitejs/plugin-legacy

核心作用：为打包后的代码生成兼容低版本浏览器的降级方案（如 IE11、旧版 Chrome），自动注入 polyfill 和转译 ES6+ 语法。

安装 & 配置：

npm install @vitejs/plugin-legacy -D

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

export default defineConfig({
  plugins: [
    legacy({
      targets: ['ie >= 11'], // 兼容目标（可配置多个，如 ['Chrome 60', 'iOS 10']）
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 兼容 async/await
    })
  ]
})

适用场景：项目需要兼容低版本浏览器（注意：Vue3 本身不支持 IE11，仅能通过该插件部分降级）。

二、开发提效类（提升开发体验，减少重复工作）

1. vite-plugin-eslint

核心作用：将 ESLint 集成到 Vite 开发流程中，实时校验代码规范（开发时控制台报错、页面浮层提示），避免提交不规范代码。

安装 & 配置：

npm install vite-plugin-eslint eslint eslint-plugin-vue -D

import { defineConfig } from 'vite'
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    eslintPlugin({
      cache: false, // 关闭缓存（调试时用）
      include: ['src/**/*.{vue,js,ts}'] // 校验的文件范围
    })
  ]
})

适用场景：团队开发需要统一代码规范，或个人开发想提前发现语法 / 规范问题。

2. vite-plugin-mock

核心作用：本地模拟后端接口，无需等待后端接口开发完成，直接在前端定义接口返回数据，支持热更新。

安装 & 配置：

npm install vite-plugin-mock mockjs -D

import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    viteMockServe({
      mockPath: 'mock', // 模拟接口文件存放目录（src/mock 或根目录 mock）
      localEnabled: true // 开发环境启用 mock
    })
  ]
})

适用场景：前后端分离开发，后端接口未完成时，前端独立开发调试接口逻辑。

3. vite-plugin-inspect

核心作用：调试 Vite 构建过程的神器，启动项目后访问 http://localhost:3000/__inspect/，可查看模块依赖、插件执行顺序、代码转译结果等。

安装 & 配置：

npm install vite-plugin-inspect -D

import { defineConfig } from 'vite'
import inspect from 'vite-plugin-inspect'

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

适用场景：排查 Vite 构建 / 插件相关问题（如模块解析失败、热更新失效、代码转译异常）。

三、样式处理类（优化样式开发 / 打包体验）

1. vite-plugin-style-import

核心作用：实现 UI 组件库样式的按需导入（如 Element Plus、Ant Design Vue），避免全量导入样式导致打包体积过大。

安装 & 配置（以 Element Plus 为例）：

npm install vite-plugin-style-import consola -D

import { defineConfig } from 'vite'
import { createStyleImportPlugin } from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    createStyleImportPlugin({
      resolves: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/theme-chalk/${name}.css`
          }
        }
      ]
    })
  ]
})

适用场景：使用大型 UI 组件库（如 Element Plus、AntD），想减小打包体积。

2. vite-plugin-css-injected-by-js

核心作用：将组件的 CSS 样式注入到 JS 文件中（通过 <style> 标签动态插入），打包后不再生成单独的 .css 文件，减少 HTTP 请求。

安装 & 配置：

npm install vite-plugin-css-injected-by-js -D

import { defineConfig } from 'vite'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

export default defineConfig({
  plugins: [cssInjectedByJsPlugin()]
})

适用场景：开发组件库、单页应用想减少 CSS 文件请求数。

四、性能优化类（减小打包体积，提升加载速度）

1. vite-plugin-compression

核心作用：打包时自动压缩文件（支持 gzip/brotli 格式），服务器配置后可返回压缩文件，大幅减小文件体积（通常减少 50%+）。

安装 & 配置：

npm install vite-plugin-compression -D

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

export default defineConfig({
  plugins: [
    viteCompression({
      algorithm: 'gzip', // 压缩算法（gzip/brotliCompress）
      threshold: 10240, // 文件大于 10kb 才压缩
      deleteOriginFile: false // 不删除原文件（便于回退）
    })
  ]
})

适用场景：生产环境打包优化，需要减小静态资源体积。

2. rollup-plugin-visualizer

核心作用：分析打包后的体积分布，生成可视化图表（HTML 格式），清晰看到每个依赖 / 模块的体积占比，定位大文件。

安装 & 配置：

npm install rollup-plugin-visualizer -D

import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      open: true, // 打包后自动打开可视化页面
      filename: 'dist/stats.html' // 生成的分析文件路径
    })
  ]
})

适用场景：排查打包体积过大问题，找到需要优化的依赖（如替换体积大的库）。

3. vite-plugin-imagemin

核心作用：自动压缩项目中的图片（jpg/png/svg/gif/webp），无损 / 有损压缩可选，减小图片体积。

安装 & 配置：

npm install vite-plugin-imagemin -D

import { defineConfig } from 'vite'
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7 }, // gif 压缩级别
      optipng: { optimizationLevel: 7 }, // png 压缩级别
      mozjpeg: { quality: 80 } // jpg 质量（0-100）
    })
  ]
})

适用场景：项目中有大量图片资源，需要减小图片加载体积。

五、构建增强类（扩展 Vite 构建能力）

1. vite-plugin-pages

核心作用：基于文件系统自动生成 Vue Router 路由（如 src/views/home.vue 自动对应 /home 路由），无需手动配置路由表。

安装 & 配置：

npm install vite-plugin-pages vue-router -D

import { defineConfig } from 'vite'
import Pages from 'vite-plugin-pages'

export default defineConfig({
  plugins: [
    Pages({
      dirs: 'src/views', // 路由文件存放目录
      extensions: ['vue'] // 识别的文件扩展名
    })
  ]
})

适用场景：大型单页应用，路由文件多，想减少手动配置路由的工作量。

2. vite-plugin-components

核心作用：自动导入 Vue 组件（包括本地组件和 UI 组件库），无需手动写 import xxx from './xxx.vue'。

安装 & 配置：

npm install vite-plugin-components -D

import { defineConfig } from 'vite'
import Components from 'vite-plugin-components'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'], // 自动导入的本地组件目录
      resolvers: [
        // 自动导入 Element Plus 组件（无需 import）
        (name) => {
          if (name.startsWith('El')) {
            return { importName: name.slice(2), path: 'element-plus' }
          }
        }
      ]
    })
  ]
})

适用场景：组件数量多，想简化导入语法，提升开发效率。

六、其他实用类

1. vite-plugin-svg-icons

核心作用：将 SVG 图标生成雪碧图（symbol 模式），通过 <svg-icon name="icon-name" /> 快速使用，比单独引入 SVG 更高效。
适用场景：项目中有大量 SVG 图标，想统一管理、减少请求。

2. vite-plugin-open

核心作用：启动 Vite 开发服务器后，自动打开浏览器并访问项目地址，无需手动输入 URL。
适用场景：开发时想快速打开项目，减少手动操作。

3. vite-plugin-node-polyfills

核心作用：为 Vite 提供 Node.js 内置模块（如 path、fs、crypto）的 polyfill，解决第三方包依赖 Node 模块导致的报错。
适用场景：引入的第三方包依赖 Node 模块（如某些加密库、文件处理库）。

总结

使用 Vite 插件的核心要点：

核心插件必装：@vitejs/plugin-vue 是基础，@vitejs/plugin-vue-jsx 按需装，@vitejs/plugin-legacy 仅需兼容低版本浏览器时用；
按需选择提效 / 优化插件：开发提效选 vite-plugin-eslint/vite-plugin-mock，性能优化选 vite-plugin-compression/rollup-plugin-visualizer；
避免过度插件：插件越多，构建速度越慢，只装项目真正需要的插件；
注意版本兼容：插件版本需与 Vite 版本匹配（如 Vite 4.x 需对应插件的 4.x 版本）。