Vite插件大全

Vite下一代前端开发与构建工具

Vite优势

---

• 💡 极速的服务启动
• ⚡️ 轻量快速的热重载
• 🛠️ 丰富的功能
• 📦 优化的构建
• 🔩 通用的插件
• 🔑 完全类型化的API

---

Vue 3

• Vitesse 基于Vite的入门模板.
• vite-vue3-tailwind-starter Vite + Vue 3 + Tailwind CSS 的入门脚手架模板.
• vite-ts-tailwind-starter TypeScript，Tailwind CSS，Cypress.io e2e 测试 + CI.
• vite-electron-quick 带有 Vue 3、TypeScript 和 Electron 11 的入门模板.
• vite-electron-builder 基于 Vite 的 Electron 应用程序的安全样板.
• vue-vben-admin 基于 Vue3、Ant-Design-Vue、TypeScript 的后台管理模板.
• electron-vue-next 一个用于快速上手 vue-next 和 electron 的模板.
• vite-electron-ts 一个可以帮助你开始在 Electron 中使用 Vite、Vue 3 和 Typescript 进行开发模板.
• vue-pure-admin 基于 Vue3、TypeScript、Tailwind CSS、element-plus 的后台管理模板.
• vite-ts-quick Vue 3 + Vuex + Vue-router + TypeScript 快速模板.
• fast-crud 面向选项的 crud 框架，以闪电般的速度开发 crud.
• electron-vite-quick-start - 一个基于 vite 开发的 Electron 应用程序.
• NeuVite - 带有 Vite.js 和 Vue.js 的 Neutralino.js 模板.
• vue3-SSR-starter - 使用一行代码预取并将状态同步到客户端，开箱即用.
• electron-vite-template - Electron 13、Vue 3 和 TypeScript。让您的桌面开发更轻松.
• vite-tauri-template - Tauri + Vite + Vue 3 + Vuetify 3 桌面应用模板.
• vue-vite-h5 - 使用 Vue3、TypeScript 和 Vant 开发移动应用程序.
• electron-vue-vite - Electron，Vue3，Vite 集成.
• Vitesome - 带有Vite.js 的简单固执的 Vue3 入门模板，使用Vue3 + TypeScript + WindiCSS + Vue Router 4, i18n and Iconify.
• vitesse-lite - Vitesse 的轻量级版本.
• vitesse-webext - WebExtension Vite 入门模板.
• Vitesse SSR - 基于 Vitesse 的服务器端渲染。部署到 Vercel 或任何 Node.js 环境.
• Vitesse Edge - 基于 Vitesse 的边界侧渲染，由 Vitesse 提供支持。部署到 Cloudflare Workers.
• vite-ts-vue3-todo - Vue3 + TS + Vue-Router4 + Pania2 模板.
• vue-component-template - 一个可以创建自己的 Vue3 TSX 组件的模板.
• vite-vue3-tsx-starter - 这个模板可以帮助你开始在 Vite 中使用 Vue 3 和 Typescript 进行开发。.
• fast-vite-electron - Vite + Electron 和 Esbuild 模板.
• fast-vite-nestjs-electron - Vue3 + Vite + Electron + Nestjs 与 esbuild.
• naive-ui-dashboard-template - UI 友好，Vue 3 + TSX + TailwindCSS 2 JIT + PostCSS + Naive UI.
• vitailse - 类似于 Vitesse，但具有 Tailwind CSS.
• vitespa - 没有 SSG 的基于 Vitesse 的 SPA.

Vue 2

• vite-vue2-windicss-starter - Vue 2、Vue 路由器、组合 API、VueUse、Windi CSS 和 TypeScript.
• admin-base-tmpl -使用 Vue2、TypeScript、Element UI 的基本管理模板.
• vite-ts-vue2-todo - Vue2 + ts + Vue-Router3 + Pania1 + Composition API.
• vite-vue2-typescript - 使用组合 API 的 Vue2 TypeScript 入门模板.

React

• vite-reactts-electron-starter - React，Tailwind CSS，TypeScript 和 Electron.
• vite-electron-esbuild-stater - 带有 React、TypeScript、Electron 和 esbuild 的入门模板.
• Vitamin - React TypeScript、TailwindCSS、SPA + PWA、Cypress 和 CI.
• vite-reactts-eslint-prettier - React，TypeScript，ESlint，Prettier，预提交.
• vite-reactts-antd-starter - 基于React，TypeScript，Antd模板.
• react-vite-admin - 基于 React、Recoil、React Query、React Hooks、TypeScript、Axios 构建的后台模板.
• vitejs-template-react-rescript - 基于 React + ReScript 的一个启动器.
• vite-react-rtkq - 带有选择加入 TypeScript 的 React + Redux Toolkit 查询入门模板.
• vite-react-quick - Vite + React + React-router-dom + TypeScript 快速模板.
• vite-template-react-plus - 基于Vite + React + TypeScript + ESLint + Prettier + Windi CSS + Visualizer 快速启动项目模板.
• vite-boilerplate - 带有 TypeScript、React、Storybook 和 Express 的全栈模板.
• reactjs-vite-tailwindcss-boilerplate - 基于 React, TypeScript, Jest, Testing Library, Tailwind CSS, ESLint + Prettier 模板.
• Tropical - 基于 React 和客户端 JS岛构建的快速、主要是 HTML 静态站点.
• vite-plugin-react-refresh - 为 @vitejs/plugin-react-refresh 提供增强功能.
• vite-reactts17-chakra-jest-husky - 基于 React 17, TypeScript, Chakra UI, Jest, ESLint, Prettier, Husky 构建的模板.
• react-ts-vite-template - 基于 React, TypeScript, Jest, Testing Library, Cypress, ESLint, Prettier, Husky 构建的模板.
• vite-reactts-tailwind-rtk-eslint - 基于Vite构建的React + TypeScript + Tailwind + RTK + eslint样板.
• vite-react-tailwind-template - 基于 React 17, TypeScript, Jest, ESLint, Prettier, Husky, Tailwind CSS, PostCSS, pnpm 工具.
• vite-react-ssr - 基于 Vite + React + React-router-dom、Tailwind CSS 2 JIT 的服务器端渲染项目模板.
• vite-material-ui - 用于 React、TypeScript 和 MUI 最新主要版本的 Vite 模板.
• stravital - 基于 React 17 + Vite + react-router-dom + react-icons + Prop-Types + Tailwind CSS 脚手架.
• vite-react-ts-tailwind-firebase-starter - 使用 Vite + React + TypeScript + Tailwind CSS (daisyUI) + Firebase (v9) + Prettier + ESLint 的启动器.
• vite-react-express-boilerplate - 带有 React 和 Express 的全栈模板.
• vite-react-express-docker-boilerplate - 带有 Docker、React 和 Express 的全栈模板.

Plugins

集成插件

• vite-plugin-pwa - 零配置 PWA.
• vite-plugin-windicss - Windi CSS 集成.
• vite-plugin-node - 与 Node.js 后端服务器集成.
• vite-plugin-cesium - 与Cesium库集成.
• vite-plugin-mpa - 开箱即用的多页应用程序（MPA）集成.
• vite-react-jsx - React 17 的自动 JSX 运行时为您的整个包.
• vite-plugin-spritesmith - 将一组图像转换为 spritesheet 和 SASS/LESS/Stylus 混合.
• vite-plugin-host - 允许您使用自定义域进行开发.
• vite-plugin-eruda - 帮助您在开发环境中自动打开调试工具.
• vite-plugin-linter - 可扩展的linter框架，在 Vite 输出和浏览器控制台中显示 linting 输出，包括 ESLint 和 TypeScript ootb.
• vite-plugin-checker - 在具有覆盖和终端提示的工作线程中快速运行检查器（TypeScript/VLS/vue-tsc 等）.
• vite-plugin-stimulus-hmr - 与 Stimulus 集成，支持 HMR.
• @nabla/vite-plugin-eslint - 在 worker 中异步运行 ESLint 以保持 HMR 快速.
• vite-plugin-relay - 允许使用Relay.
• vite-plugin-tauri - 将 Tauri 集成到 Vite 项目中以构建跨平台应用程序.
• vite-plugin-federation - 支持模块联合，受 Webpack 模块联合功能的启发.
• vite-plugin-wasm-pack - 与 rust wasm-pack集成，简单的方法.

Loaders

• unplugin-icons - 普遍按需访问数千个图标作为组件.
• vite-plugin-svg-icons - 快速创建 SVG 精灵.
• vite-plugin-rsw - 加载 rust-compiled (wasm-pack) WebAssembly 包.
• vite-imagetools - 使用 url 查询参数加载和转换图像.
• vite-plugin-radar - 多合一分析加载器（支持 7 多个提供商）.
• vite-plugin-virtual-plain-text - 此插件将虚拟资产路径文件解析为针对项目根目录的本地文件路径.
• vite-plugin-monaco-editor - Monaco Editor编辑器集成.
• vite-tsconfig-paths - 提供vite使用 TypeScript 的路径映射解析导入的能力。.
• vite-plugin-faker - 使用 TypeScript 编译器生成模拟数据.
• vite-plugin-style-import - 按需引入组件库样式.
• vite-plugin-mock - 用于开发和生产的模拟插件.
• vite-plugin-mocker - Mocker vite 插件.
• vite-plugin-theme - 动态改变主题颜色.
• vite-aliases - 基于项目结构自动生成别名.
• vite-plugin-import - 模块化导入插件.
• vite-plugin-imp - 按需导入库组件样式，使您的应用程序更苗条.
• view-launcher - 检查 Vue 组件并直接从浏览器跳转到源代码.
• vite-plugin-mkcert - 提供证书 https 开发服务器.
• vite-plugin-vconsole - 帮助开发人员使用 vconsole 来方便移动开发和调试.
• vite-plugin-cdn-import - 从 CDN 导入包.
• vite-dts - .d.ts为库生成模块的快速插件.
• vite-plugin-externals - 从输出包中排除依赖项.
• vite-plugin-async-catch - 自动注入异步函数的 try catch 代码.
• vite-plugin-mock-server - Mock 服务器插件，支持使用 TS 和 JS 编写 Mock API 和 HMR.
• vite-plugin-dynamic-publicpath - 使用动态导入处理程序更改运行时公共基本路径，如 Webpack 的__webpack_public_path__.
• vitawind - 自动安装和设置 Tailwind CSS.
• vite-plugin-restart - 在文件更改时重新启动 Vite 服务器.
• vite-plugin-full-reload - 在文件更改时重新加载浏览器.
• vite-plugin-tips - 在页面上提供更好的开发服务器状态提示.
• vite-plugin-vars-modifier - 从 css 预处理器文件转换变量.
• unplugin-auto-import - 按需 API 自动导入.
• vite-plugin-inspect - 检查 Vite 插件的中间状态.
• vite-plugin-proxy-middleware - 插件允许您同时打开proxy和h2选项.

Bundling

• vite-plugin-compress - 一个vite压缩插件.
• vite-plugin-imagemin - vite图片压缩插件.
• vite-plugin-importer - babel-plugin-import 的捆绑包.
• vite-plugin-banner - 注释生成器.
• vite-plugin-compression - 使用 gzip 或 brotli 压缩资源.
• rollup-plugin-critical - 用于生成关键 CSS.
• vite-plugin-dts - 从lib.ts或.vue源文件生成声明文件.
• vite-plugin-multi-device - 用于多个设备构建的 Vite 插件.
• vite-plugin-vue-docs - 分析 vue 组件以自动生成可预览文档.

扩展插件

• vite-plugin-html - 一个针对 index.html，提供压缩和基于 ejs 模板功能的 vite 插件.
• vite-plugin-ts-nameof - 让Vite能够在 TypeScript 中解析 nameof调用.
• vite-plugin-handlebars - Vite 对 Handlebars 的支持.
• vite-plugin-html-config - 这个插件帮助我们配置额外的html，可以通过不同的环境注入不同的脚本.
• vite-plugin-html-template - vite 应用程序的 HTML 模板，如 webpack 的 html-webpack-plugin，它与vite-plugin-mpa完美配合.
• vite-plugin-md2vue - 将 markdown 模块转换为 Vue 组件.
• vite-plugin-virtual-html - 使 Vite MPA 与@vue/cli.
• vite-plugin-posthtml - 运行PostHTML 的Vite 插件。目前仅在服务/构建的 HTML 文件上运行index.html.
• vite-plugin-plain-text - Vite 插件将匹配规则的文件转换为纯文本.
• vite-plugin-virtual-html-template - HTML 模板，支持灵活的虚拟 URL.
• vite-plugin-require-context - 支持require.context中vite.
• vite-remark-html - 将.md导入转换为 HTML 字符串.
• vite-plugin-commonjs - 支持 CommonJS 到 ESM.
• vite-plugin-content - 转换yaml，xml，ini，toml，csv，plist和properties文件ES6模块.
• vite-plugin-require - require通过代码转换支持的Vite 插件.
• vite-plugin-css-modules - 支持的 vite 项目可以使用 css 模块，而不仅仅是.module.xxx.
• vite-plugin-macro - 为基于 Vite 的项目带来宏功能.
• vite-plugin-global-style - 处理 CSS、SASS、LESS 和 Stylus 的全局样式.
• vite-plugin-shared-modules - 在 monorepos 中共享 node_modules.

Testing

• mocha-vite-puppeteer - 使用 Vite 捆绑器和 Puppeteer 浏览器启动器运行您的 Mocha 前端测试.
• vite-plugin-test - Headless 的Vite 插件测试您的Vue,React和Lit-Element组件.
• vite-web-test-runner-plugin - 一个用于测试 Vite 驱动项目的@web/test-runner插件。这个插件会自动连接到当前目录下的 Vite 项目，加载项目配置，并使用你已经配置好的 Vite 构建管道来构建每个测试文件.