本文列出了一些在工作中常会用到的、比较好用的 vite 插件。

Framework

Vue

• @vitejs/plugin-vue - vue3 官方支持。
• @vitejs/plugin-vue-jsx - vue3 JSX 语法插件，官方支持
• @vitejs/plugin-vue2 - vue2 支持
• vite-plugin-pages - 基于文件系统自动创建路由。
• unplugin-vue-i18n - vue-i18n 国际化方案的配套插件

React

• @vitejs/plugin-react - React 官方支持
• vite-plugin-react-swc - 使用 swc 编译 React，速度更快

Preact

• @preact/preset-vite - preact 支持

Electron

• electron-vite - electron 支持

Tauri

• vite-plugin-tauri - Tauri 支持

常用

• vite-tsconfig-paths - 支持 tsconfig.json的 paths mapping
• vite-plugin-inspect - 审查vite-plugin中间状态
• vite-plugin-mock-dev-server - 在 vite 开发服务中注入 mock-server ，提供 API Mock data 支持
• unplugin-icons - 将 icons 资源转化为组件
• vite-plugin-windicss - widicss 支持
• @vitejs/plugin-legacy - 低版本浏览器支持
• unplugin-auto-import - 自动导入模块
• vite-plugin-remove-console - 可配置的删除代码中的 console

其他

WASM

• vite-plugin-wasm-pack - rust wasm-pack 支持

Federation

• vite-plugin-federation - 提供模块联邦支持

PWA

• vite-plugin-pwa - 提供 PWA 支持