Vite插件系统支持原生及Rollup插件，通过plugins数组声明并按序执行；生产构建中可复用Rollup插件于build.rollupOptions.plugins，但需避免与内置功能重复、检查SSR/lib兼容性，并按需集成高频实用插件。
Vite 的插件系统是其核心扩展机制，通过 plugins 字段可灵活接入各类功能，既支持 Vite 原生插件，也兼容 Rollup 插件生态，无需额外构建层封装。
在 vite.config.ts/js 中正确声明插件
Vite 会自动识别并执行 plugins 数组中的插件，顺序决定执行优先级（靠前的先处理）。插件函数返回对象，包含钩子（如 configureServer、transform）来干预开发或构建流程。
- Vue 项目必须添加
@vitejs/plugin-vue才能解析.vue文件 - JSX 支持需配合
@vitejs/plugin-vue-jsx - Mock 接口推荐
vite-plugin-mock或vite-plugin-mock-server，通常只在开发环境启用 - 插件值为
false或null会被跳过，可用于条件启用（如仅 dev 环境）
复用 Rollup 插件增强生产构建
Vite 生产构建底层使用 Rollup，因此绝大多数 Rollup 插件可直接注入 build.rollupOptions.plugins。但要注意：
- 避免与 Vite 内置能力重复：例如
@rollup/plugin-json已被 Vite 原生支持，除非需定制解析逻辑才引入 - 检查 SSR 或库模式（
build.lib）兼容性，部分插件默认不处理服务端上下文 - 常用兼容插件：
@rollup/plugin-node-resolve、@rollup/plugin-commonjs、@rollup/plugin-terser
按需集成高频实用插件
根据项目类型选择关键插件，避免盲目堆叠：
立即学习“Java免费学习笔记（深入）”；
-
开发提效：用
vite-plugin-inspect查看依赖图、转换结果；用vite-plugin-svg-icons自动注册 SVG 图标 -
兼容性保障：面向旧浏览器时加入
@vitejs/plugin-legacy，它会自动生成 ES5 版本 + polyfill 注入逻辑 -
构建优化：配合
vite-plugin-compression生成 gzip/brotli 压缩产物；用vite-plugin-pwa快速接入 PWA -
调试与测试：
vite-plugin-checker集成 TypeScript/ESLint/Vue 检查，错误实时反馈到控制台和浏览器 overlay
注意插件作用域与环境隔离
不是所有插件都适合全生命周期运行：
- 服务端渲染（SSR）项目中，某些插件需区分
ssr: true或ssr: false配置项 - 开发服务器专用插件（如 mock、inspect）不应出现在生产构建中，可用
process.env.NODE_ENV === 'development'控制加载 - 插件若返回预设数组（如框架集成插件），Vite 会自动扁平化处理，无需手动展开
