官方资源

• 文档
• GitHub Repo
• 发行说明
• Vue 3 文档
• Awesome Vue
• 从 v4 迁移

开始

• create-vite - 搭建您的第一个 Vite 项目。
• create-vitawind - 为 TailwindCSS 项目搭建脚手架。
• create-electron-vite - 为您的 Electron + Vite 项目搭建脚手架。
• create-vite-app - 为您的开箱即用的 Vite 项目搭建脚手架。
• create-nx-workspace - 为 Nx + React + Vite + Vitest 搭建脚手架。
• bati - 为 Vike 项目搭建脚手架。
• create-awesome-node-app - 选择不同的模板为您的项目搭建框架。

模板

Vanilla

• vite-vanilla-ts-lib-starter - 库 (CJS、ESM、IIFE) 的入门模板，包含 TypeScript、ESLint、Stylelint、Prettier、Jest、Husky + lint-staged。
• vite-tailwind-nojs-starter - NoJS Tailwind CSS 入门模板。
• vite-tailwind-stimulus-starter - Tailwind CSS 和 Stimulus 控制器的入门模板。
• vite-phaser-ts - 带有 Phaser 和 Typescript 的入门模板。
• vite-tinybase - TinyBase 的入门模板。
• vite-tinybase-ts - TinyBase 和 TypeScript 的入门模板。
• vite-vanilla-js-template - 入门模板 ESlint、Prettier、PostCSS、Nesting、Autoprefixer、CSS Nano、CSS Reset。
• vite-starter-markup-template - Markup 入门模板。
• create-domco - domco SSG 入门模板。
• vite-vanilla-library-template - 入门模板 TypeScript、ESLint、Vitest、Husky、Conventional Commits、GitHub 操作。
• vite-alpine-template - Alpine 的入门模板。
• vite-ts-lib-starter - 包含 TypeScript、Bun、Vitest、Prettier、Renovate 和 np 的库的入门模板。
• vite-swagger-ui - Swagger UI，内置对多个 API 的支持。

Vue 3

• Vitesse - 自定的入门模板。
• vite-ts-tailwind-starter - TypeScript、Tailwind CSS、Cypress.io e2e 测试 + CI。
• vue-vben-admin - 基于 Vue3、Ant-Design-Vue、TypeScript 的后台管理模板。
• vue-pure-admin - 基于 Vue3、TypeScript、Tailwind CSS、element-plus 的后台管理模板。
• fast-crud - 面向选项的 crud 框架，开发 crud 快如闪电。
• vitesse-lite - Vitesse 的轻量级版本。
• vitesse-webext - WebExtension Vite Starter Template。
• naive-ui-dashboard-template - UI 友好，Vue 3 + TSX + TailwindCSS 2 JIT + PostCSS + Naive UI。
• Vitawind Creator - 快速创建 TailwindCSS 项目。
• vue3-tailwind3-website-starter - Vue3 / Vite / TailwindCSS 网站入门模板，每页都有指南。
• boot-vue - 带有 TypeScript + UnoCSS + DaisyUI + Vue Router + Pinia 的入门模板。
• Vue Naive - 管理模板，基于 Vue 3 + Pinia + Naive UI。
• vue-admin-box - 管理模板，基于 Vue 3 + Element-plus。
• vite-vue-proste - Pinia + Typescript + Vue-Router4 + Vitest + Vue-Test-Utils + Vue-Query + Sass + ESLint + Stylelint + Prettier + 项目预设。
• vue-vite-ssr - Typescript、Eslint、Stylelint、Husky、Lint-staged 和 Commitlint。
• vue3-vant-mobile -Vite5 + Vue3 + Vant4 + Pinia + Vue-Router4 + TypeScript 移动模板。
• vue-vite-tw-ts - Vue 3 + Vite + Vitest + Cypress E2E + Naive UI + Pinia + Vue 路由器。
• vite-vue-js-starter-template - Vite + Vue3 + JavaScript + Vue Router + Pinia + TDesign + ESLint + Stylelint + 更漂亮的简单模板。
• vue-xs-admin - 基于 Vue3、Vite3 ElementPlus、TypeScript、Pinia、VueRouter。
• [vulcan](https://github. com/pengzhanbo/vulcan) - 移动应用模板。Vite、Vue 3、TypeScript、Sass、i18n、Vitest&Cypress、Pinia、APIs&Mock、ESLint、Prettier、自动导入。
• [antdv-pro](https://github .com/antdv-pro/antdv-pro) - AntdvPro 是一套完整的基于 Vue3、Vite4、ant-design-vue4、Pinia、UnoCSS 和 Typescript 的企业级中后端前端/设计解决方案。
• vue3-quick-start - 构建一个工程化的 Vue 3 项目，集成 Vite + Vue3 + TypeScript + ESLint + Prettier + Commitizen + Husky + LintStaged + CommitLint + AutoImport + ReleaseIt。
• [antd-vue3-admin](https://github.com/Zuojiangtao/antd- vue3-admin) - 基于 Vue3、Vite4、TS5 和 Ant-Design-Vue4 的入门模板。
• vue-file-upload - 文件使用 Vue3 和 TypeScript 构建的管理系统，允许上传单个和多个文件并具有预览功能。
• arco-admin - Vite + ArcoDesign + TypeScript 遵循 ESM 标准，提供开箱即用的标准化，功能丰富的中后台管理系统模板。
• materio-free-vuetify-nuxtjs-admin-template - Vuejs 3、Vite 5、Vuetify 3 和 NuxtJS 3。
• vite-plugin-vue-style-bundler - 自动捆绑Vue/sfc 样式转换为 JavaScript。
• celeris-web - 基于 Vite + Vue3 + TypeScript + Vue-Router + Pinia + Unocss 的模板+ Naive UI + pnpm Monorepo。
• vite-ts-starter - Vue I18n 动态路由器本地化模板，使用 UnoCSS + Unplugin + Element-Plus + Vitest + TypeScript + Vue-Router + Vuex + Scss + ESLint + Stylelint + Husky + `lint-上演。

Vue 2

• vite-vue2-windicss-starter - Vue 2、Vue Router、Composition API、VueUse、Windi CSS 和TypeScript。
• vite-vue2-ts-starter - 使用 vue-property-decorator、vue-router、Vuex 的 Vue2 TypeScript 入门模板。
• vite-vue2-ts-vuetify-starter - 它是上面的 vite-vue2-ts-starter 与 Vuetify 及其优化设置. 包括基本模板。
• vitify-admin - Vuetify 管理入门模板，具有完整的 TypeScript 支持和 Vuetify 组件的智能感知。

React

• [Vitamin](https:// github.com/wtchnm/Vitamin) - React TypeScript、TailwindCSS、SPA + PWA、Cypress 和 CI。
• vite-template-react - 创建类似 React App 的模板。
• vitejs-template-react-rescript - React + ReScript。
• [template-vite-react](https 😕/github.com/lzm0x219/template-vite-react) - 一个极简的 React Vite 入门模板。
• reactjs-vite-tailwindcss-boilerplate - React 18、TypeScript、Vitest、测试库、TailwindCSS 3、Eslint 和 Prettier。
• vite -react-ts-tailwind-firebase-starter - 使用 Vite + React + TypeScript + Tailwind CSS (daisyUI) + Firebase 的入门程序（v9）+ Prettier + ESLint。
• [create-react-app-vite]（https://github.com/laststance/create-react-app-vite）- React、TypeScript、TailwindCSS、MSW、Vitest、React 测试库、ESLint、Prettier、GitHub Actions。
• chrome-extension-boilerplate-react-vite - React + TypeScript + SASS + Prettier + ESLint + GitHub Actions + HMR(热门模块重新加载）+ Turborepo + Chrome 扩展清单 v3。
• vite-rtk-query - React、TypeScript、Redux Toolkit、RTK Query、TailwindCSS、MSW 、Jest、React 测试库、ESLint、Prettier。
• vite-react-proste - React + TypeScript + react-router-dom + Recoil + SASS + 测试库 + react-query + ESLint + Stylelint + Prettier。
• React-PWA - React v18、TypeScript、Vite、React Router v6、MUI v5、Recoil、PWA、Eslint、Prettier、Husky、lint-staged、https localhost 等。
• react-vite-ssr - Mobx、Typescript、Eslint、Stylelint、Husky、Lint-staged 和 Commitlint。
• Viterts - React + TypeScript + Redux + React Router + Jest + ESLint + Airbnb + Prettier + SASS。
• ViteRC - React 18 + TypeScript + ESLint (Airbnb) + Prettier + Husky + Jest + Absolute imports + Commit linting。
• React Starter Kit - Jamstack、React、React Router、Material UI、Firebase Auth、TypeScript、ESLint、Prettier、Jest、GitHub Actions。
• vite-mern-template - React 18 + TypeScript + Vite + Redux Toolkit + ESLint + React Router DOM + Axios + React Icons + React Toastify + Express + Mongoose。
• Varsarr - React、Typescript、Styled-Components、Recoil、React-Query、Axios、Absolute 导入。
• viterjs-template - React + JavaScript + Redux + Material UI + Axios + ESLint + Prettier。
• react-vite-ts-boilerplate - React 18、TypeScript、SCSS、ESLint、Prettier、Vitest。
• vite-react-universal-template - React18 + TypeScript + react-router-dom + Zustand + ESlint + Prettier + Stylelint + Husky + Docker，支持API自动导入。
• react-vite-template - 一个React项目模板。
• react-xs-admin - 基于React18 + ReactRouteV6 + Vite + And Design + ReactIntl​​ + ReactRedux + Emulation开发的后台管理系统模板。
• vite-mui-ts - React + TypeScript + Redux + Material UI + RRD + ESLint + Prettier。
• template-vite-react-ts-tailwind - React + TypeScript + Tailwind CSS + Eslint + Prettier。
• vite-react-ts-template - React 18、TypeScript、ESlint、Prettier、Dev Container、Vitest、Storybook、Playwright、MSW、React Router 6、React Query、Chakra UI、Zustand。
• react-vite-tailwindcss-template - React、JavaScript、TailwindCSS、ESlint、Prettier、Pre-commit。
• vite-tinybase-react - TinyBase 和 React 的入门模板。
• vite-tinybase-ts-react - TinyBase、TypeScript 和 React 的入门模板。
• vite-react-ssr-boost-template - 使用 TypeScript、Mobx、React Router、Head Manager、Suspense、Streaming 创建 React 18 SSR/SPA 应用的模板。还包括 CI/CD、ESLint、Prettier、Stylelint、Husky、Semantic Release。
• vite-react-ts-shadcn-starter - 使用 TypeScript、React Router、Tailwind CSS、Shadcn UI、React Query、ESLint、Prettier、Stylelint、Husky、React-i18next、Transmart 创建 React 18 SPA 应用的模板。
• template-tauri-vite-react-ts-tailwind - Tauri + React + Typescript + TailwindCSS + Prettier + ESLint 内置模板。
• vite-react-chakra-starter - 使用 TypeScript 和 Chakra UI 创建 React App 的入门模板。已使用 ESLint、Prettier 和 Husky 进行配置。
• vite-react-tailwind-starter - 使用 TypeScript 和 Tailwind CSS 以及 Shadcn UI 创建 React App 的入门模板。已使用 ESLint、Prettier 和 Husky 进行配置。
• monorepo-template-react - 用于 SSR、SPG、SPA 和 API 提供的 React + Typescript 模板。
• vite-react-dapp-template - 用于去中心化应用前端开发的入门模板，具有预配置的钱包身份验证、i18n 和 UI 功能。
• vite-express-ssr-ts - 具有内置 api 功能的 React + Typescript + ExpressJS + Vite SSR 模板。
• vite-react-flow-template - React Flow 入门模板。
• react-vite-template - React、TypeScript、Vite、Mantine、Million、Husky、Prettier、Import Sorter、Lint-staged。
• gravity-ui-vite-模板 ) - 具有 Gravity UI 生态系统 (React、TypeScript、Gravity UI、Vite、Husky、ESLint、Prettier、Lint-staged) 的模板。
• vite-react-component-library-starter - 用于使用 TypeScript、Tailwind CSS、Storybook、Vitest、ESLint、Prettier、Husky 和 GitHub Action 创建 React 组件库的入门模板。
• vite-template-awesome-soho - DevContainer 模板，用于创建 React 18、Javascript + JSDoc、React Router、Ant Design、ESLint、EditorConfig、.env、SonarLint、Vitest。
• react-component-library-vite - 一个包含 React、Javascript、Styled-Components、Vitest、React Testing Library、Storybook 的库模板。
• ReTail - 使用 Remix、TypeScript、Tailwind CSS、Prettier 和 ESLint 构建全栈 WEB 应用程序的入门模板。
• vite-react-redux-saga-typescript - 包含 React、TypeScript、Redux (Redux Toolkit)、Saga、React Testing Library、ESLint、Prettier 和 Husky 的入门模板。
• vite-complete-react-app - 使用 React、TypeScript、Redux Toolkit、React Router、Axios、Sass、Moment、ESLint、Prettier 和 React Testing Library 构建 Web 应用程序的入门模板。
• vite-react-framer-starter - 包含 React、TypeScript、Framer Motion、Tailwind CSS、ESLint 和 Prettier 的入门模板。
• vite-jsx-remove-attributes - 从生产版本中删除 data-testid（可配置）。
• React Tanning - 带有 React + Vite + TypeScript + TanStack + Tailwind 的入门模板。
• Reactive - React 入门模板，带有 react-router、UnoCSS、LinguiJs、zustand 和大量功能的 React 文件的基于文件的路由约定。
• RVTGB - React + TypeScript 入门模板，带有 Generouted 和 Biome 的文件路由。
• vite-biome-tailwind-template - React、Typescript、Biome、Tailwind CSS。
• React Dapp Starter - 适用于企业级的 Web3 DApp 启动器，带有 TypeScript、TailwindCSS、Web3Modal、Wagmi、Shadcn UI、Zustand 和 TanStack Query，适用于可扩展的去中心化应用程序。
• vite-template-react-ts-jest - React + TypeScript + Jest。

Svelte

• SvelteKit - 构建 Svelte 应用的最快方法。
• svelte-vite-ssr - 支持 SSR 的 Svelte。
• template-vite-svelte-ts-tailwind - Svelte + TypeScript + Tailwind CSS + Prettier。
• vite-svelte-flow-template - Svelte Flow 入门模板。

Solid

• vitesse-solid - Opinionated Vite + SolidJS 入门模板。包括 TypeScript、ESLint、Prettier、UnoCSS、HopeUI 等。
• vitesse-lite-solid - 适用于 SolidJS 的轻量级 Vite 入门模板。

Electron

• electron-vite-vue - Electron + Vite + Vue 模板。
• electron-vite-react - Electron + Vite + React 模板。
• electron-vite-boilerplate - 支持 SerialPort、SQLite3 和 node C/C++ 插件。
• electron-vite-template - Electron 13、Vue 3 和 TypeScript。让您的桌面开发更轻松。
• fast-vite-electron - Vue3 + Vite + Electron 和 esbuild。
• fast-vite-nestjs-electron - Vue3 + Vite + Electron + Nestjs 和 esbuild。
• vite-plugin-electron-quick-start - Electron 项目的模板。
• vite-electron-builder - Electron 应用使用 Vite 作为后端和前端，并可自动发布。
• vite-reactts-electron-starter - React、Tailwind CSS、TypeScript 和 Electron。
• electron-vue-template - 带有 TypeScript 的 Electron 模板，包括 ElectronBuilder。
• Vitron - 使用 vite 和 electron 为现代 Web 项目构建漂亮的（win、linux、mac）桌面应用程序。
• Vutron - Electron + Vite + Vue 3 + Pinia (TypeScript) 模板。
• vite-electron-plugin - 高性能、基于 esbuild 的 Vite Electron 插件。
• vite-plugin-doubleshot - 用于构建 Node.js 后端或 Electron 主进程。

Neutralino

• vite-react-neutralino-template - Neutralino + Vite + React 模板。

Elm

• vite-elm-template - 用于构建 Elm 应用程序的默认模板。

• elm_vite_tailwind_template - 使用 Tailwind CSS 和 Daisy UI 构建 Elm Web 应用程序的自定模板。

Petite-Vue

VanJS

GitHub

• github-action-template - GitHub Actions、Typescript、ESLint、Vitest、Husky、Conventional Commits 的入门模板。

其他

• vit-singlefile-gzip - 嵌入式入门模板。
• 11st-Starter-Kit - 11ty，由 Vite 提供支持，带有 Tailwind CSS 和 Alpine.js。
• chrome-ext-template-preact-windi-vite - Preact、Windi CSS、TypeScript、Prettier、ESLint、GitHub Actions 和 Chrome Extension Manifest v3。
• vite-vue3-chrome-extension-v3 - Chrome、Firefox 和 Edge 的 Web 扩展入门模板。

插件

框架无关插件

集成

• @vitejs/plugin-legacy - 支持旧版浏览器。
• vite-plugin-pwa - 零配置 PWA。
• vite-plugin-windicss - Windi CSS 集成。
• vite-plugin-node - 与 Node.js 后端服务器集成。
• vite-plugin-cesium - 与 Cesium 库集成。
• vite-plugin-linter - 可扩展的 linter 框架，可在 Vite 输出和浏览器控制台中显示 linting 输出，包括 ESLint 和 TypeScript ootb。
• vite-plugin-checker - 使用覆盖和终端提示在工作线程中快速运行检查器（TypeScript/VLS/vue-tsc 等）。
• vite-plugin-tauri - 在 Vite 项目中集成 Tauri 以构建跨平台应用。
• vite-plugin-federation - 支持模块联合，灵感来自 Webpack 模块联合功能。
• vite-plugin-wasm-pack - 与 rust wasm-pack 集成，简单易用。
• vite-plugin-comlink - 结合使用 WebWorkers 和 Comlink，让使用更轻松。
• vite-plugin-sass-dts - 这是一个在使用 CSS 模块类型安全时自动创建类型文件的插件。
• vite-plugin-ali-oss - 将项目中捆绑的生产文件上传到 Ali OSS，HTML 除外。
• vite-plugin-webfont-dl - 下载并注入 webfonts（Google Fonts）以提高网站的性能。
• vite-plugin-babel - 构建和服务器都集成 Babel，以支持纯 JS/JSX 文件中的装饰器或类字段。
• vite-plugin-electron - 集成 Vite 和 Electron。
• vite-plugin-optimizer - 手动预捆绑。
• vite-plugin-babel-compiler - 该插件与 Babel 编译器配合使用。
• vite-plugin-commonjs - CommonJs 的纯 JavaScript 实现。
• vite-plugin-mpa-plus - 更灵活的 MPA（多页应用程序）支持 html 模板、路径重写。
• vite-plugin-multi-pages - 多页面支持，可以构建 src/pages 任意页面，可以设置 prefixName。
• vite-plugin-html-template-mpa - 多页面通用模板支持。
• vite-plugin-vconsole-mpa - 多页面 Vconsole 支持，配置简单。
• vite-plugin-browser-sync - BrowserSync。
• vite-plugin-jspm - 使用 import map 和 es-module-shims 独立解决 CDN 提供商的依赖关系。
• vite-plugin-env-switch - 无需命令行操作即可切换项目环境并重启 vite 服务器。
• vite-plugin-virtual-mpa - 开箱即用的 MPA 插件，具有 html 模板引擎和虚拟文件支持，仅使用一个模板即可生成多个文件。
• vite-plugin-stylelint - 同步/异步运行 Stylelint。
• Vite-plugin-graphiql - 集成到 GraphiQL IDE。
• vite-plugin-graphql-server - 引导本地 GraphQL 服务器进行测试和文档编写。
• unplugin-fonts - 从 Typekit、Google Fonts、Fontsource 或您自己的自定义字体加载字体。
• unplugin-config - 用于 Web 应用的配置文件生成器，允许外部自定义全局变量而无需重新打包。
• vite-plugin-svg-spritemap - 从多个 .svg 文件生成 SVG 精灵图。
• vite-plugin-dc - 与 @dvgis/dc-sdk 库集成。
• @spiriit/vite-plugin-svg-spritemap - 将您的 SVG 文件打包到一个 spritemap 文件中，并与 <svg>/<img> 一起使用，并直接在您的 CSS 中使用。
• vite-plugin-auto-mpa-html - 基于文件目录的自动化多页面构建插件，支持使用 EJS 的 HTML 模板。
• vite-plugin-cloudflare-functions - Cloudflare 页面功能集成。
• @storybook/builder-vite - Storybook 构建器。
• @builder.io/partytown - 将资源密集型第三方脚本从主线程移至 Web 工作线程。
• vite-plugin-dynamic-proxy - 根据 URL 参数自动配置反向代理。
• unplugin-auto-export - 自动维护 index.ts 文件中的导出语句。
• remix-development-tools - Remix.run 开发工具插件。
• vite-plugin-legacy-swc - 使用 SWC 支持旧版浏览器。
• vite-plugin-biome - Biome linter。
• vite-plugin-oxlint - Oxlint linter。
• @tomjs/vite-plugin-electron - 轻松开发 Electron 应用程序。
• @tomjs/vite-plugin-vscode - 轻松使用Web框架开发VSCode Extension的Webview，并支持HMR和Debug。
• vite-plugin-px-rem-vw - 集成PostCSS插件pxTorem和pxTovw。
• vite-plugin-mpg - 简单配置多页应用。
• vite-plugin-pagefind - 集成pagefind搜索。
• @mistjs/vite-plugin-px2viewport - 一款可自动将内联样式和样式文件从 px 单位转换为 vw 单位的插件。

加载器

• unplugin-icons - 以组件形式访问数千个图标。
• vite-imagetools - 使用 url 查询参数加载和转换图像。
• vite-plugin-radar - 一体化分析加载器（支持 7 个以上提供商）。
• vite-plugin-glsl - 导入着色器文件块。
• vite-plugin-svgo - 将 SVG 加载为纯字符串并使用 SVGO 库进行转换。
• vite-plugin-remark-rehype - 使用统一生态系统加载和转换 markdown 文件。
• vite-plugin-php - 加载和处理 PHP 入口文件而不是默认的 index.html。
• vite-plugin-lqip - 生成低质量图像占位符 (LQIP)。
• vite-plugin-ms-clarity - 将 Microsoft Clarity 脚本注入 index.html。
• @cyco130/vite-plugin-mdx - 导入 MDX。
• vite-awesome-svg-loader - 将 SVG 导入为源代码、base64 和数据 URI。保留笔触宽度，用 currentColor 替换颜色。使用 SVGO 优化 SVG。创建 SVG 精灵。
• vite-plugin-dir2json - 将目录结构转换为包含支持的文件路径的 json 数据。

捆绑

• rollup-plugin-critical - 生成关键 CSS。
• vite-plugin-dts - 从 .ts 或 .vue 源文件生成 lib 的声明文件。
• vite-compression-plugin - 使用 Node.js 流压缩文件到 gzip 或更多。
• vite-plugin-chunk-split - 自动代码分割，支持生产环境中的解包。
• vite-plugin-static-copy - 复制文件和文件夹。
• vite-plugin-zip-file - 将文件或文件夹压缩成 zip 文件。
• vite-plugin-zip-pack - 将分发/构建文件夹打包成 zip 文件。
• vite-plugin-cp - 构建 bundles 后复制文件。
• unplugin-imagemin - 基于 squoosh 和 sharp 的高性能压缩图片。
• vite-plugin-image-optimizer - 在构建时使用 Sharp.js 和 SVGO 优化（压缩）您的图片资源。
• vite-plugin-no-bundle - 生成未捆绑的代码以用于本机 ESM 或其他捆绑器。
• vite-plugin-css-injected-by-js - 获取 CSS 并通过 JS 将其添加到页面。
• unplugin-zip-pack - 使用过滤函数支持压缩您的 dist。
• vite-plugin-singlefile - 将所有 JavaScript 和 CSS 资源直接内联到最终的 dist/index.html 文件中。
• vite-plugin-node-polyfills - 为浏览器环境填充 Node 的核心模块。
• vite-plugin-cdn2 - 用 CDN 替换模块。
• vite-plugin-bundle-prefetch - 将预取资源注入 index.html。
• vite-plugin-imagemin - 优化和压缩您的图片资源，并可选择创建 WebP/AVIF。
• vite-plugin-lib-types - 构建库时生成 DTS 文件。
• vite-plugin-minipic - 高效的图片压缩工具。
• vite-plugin-robots - 生成 robots.txt。
• vite-plugin-bundle-obfuscator - JavaScript 混淆器。

Transformers

• vite-plugin-html - 插件用于最小化和使用 index.html 中的 ejs 模板语法。
• vite-plugin-ts-nameof - 能够在 TypeScript 中解析 nameof。
• vite-plugin-handlebars - 使用 Handlebars 处理 HTML 文件。
• vite-plugin-virtual-html - 使 Vite MPA 与 @vue/cli 保持一致。
• vite-plugin-content - 将 yaml、xml、ini、toml、csv、plist 和 properties 文件转换为 ES6 模块。
• vite-plugin-require - 通过代码转换支持 require 的 Vite 插件。
• vite-plugin-global-style - 处理 CSS、SASS、LESS 和 Stylus 的全局样式。
• vite-plugin-shared-modules - 在 monorepos 中共享 node_modules。
• vite-plugin-pug-transformer - Pug 模板引擎支持。
• @import-meta-env/unplugin - 在构建应用程序后将环境变量注入 import.meta.env 对象，而不是在生产过程中静态替换它。
• @modyfi/vite-plugin-yaml - 使用架构验证和错误报告将 YAML 文件转换为 ESM。
• vite-plugin-html-inject - 将 index.html 拆分为更小的可重用部分。
• unplugin-inject-preload - 根据您的构建资产将 <link rel="preload"> 注入到您的 index.html。
• @vituum/vite-plugin-handlebars - Handlebars 模板引擎支持，将 .hbs 模板转换为 .html。
• @vituum/vite-plugin-pug - Pug 模板引擎支持，将 .pug 模板转换为 .html。
• @vituum/vite-plugin-nunjucks - Nunjucks 模板引擎支持，将 .njk 模板转换为 .html。
• @vituum/vite-plugin-liquid - Liquid 模板引擎支持，将 .liquid 模板转换为 .html。
• @vituum/vite-plugin-twig - Twig 模板引擎支持，将 .twig 模板转换为 .html。
• @vituum/vite-plugin-latte - Latte 模板引擎支持，将 .latte 模板转换为 .html。
• @vituum/vite-plugin-posthtml - PostHTML 支持，将语法转换为 .html。
• @vituum/vite-plugin-juice - Juice 支持，将 .css 转换为 .html 中的内联样式。
• vite-plugin-version-mark - 自动使用 package version / git commit / custom 插入到您的项目中，作为项目版本的唯一标识符。
• vite-plugin-css-export - 将变量从 CSS 导出到 JavaScript，并支持嵌套规则。
• vite-plugin-optimize-css-modules - 使用 CSS 模块时，生成尽可能小的 CSS 类。
• vite-plugin-generate-html - 为 JavaScript 和 CSS 包定义单独的输出文件。
• vite-plugin-turbo-console - 增强 console.log() 的可读性。
• vite-plugin-html-injection - 将 HTML、JavaScript 和 CSS 代码片段注入 index.html。
• vite-plugin-typescript-transform - 在 Vite 的转换构建阶段应用 TypeScript 编译器。
• vite-plugin-public-typescript - 将 Typescript 注入 index.html。
• unplugin-generate-component-name - 自动生成组件名称。
• @laynezh/vite-plugin-lib-assets - 提取 library mode 中引用的资源文件，而不是以 base64 格式嵌入。
• css-media-splitter/vite-plugin - 将所有 @media At-rules 提取到专用的 .css 文件中，只有匹配媒体查询时才下载。
• @tomjs/vite-plugin-html - 支持 index.html 的压缩、加载、CDN 等。
• @tomjs/vite-plugin-iconify - 在index.html中注入iconify的全局变量IconifyProviders，支持局域网和自定义url。
• vite-plugin-icons-spritesheet - 通过监听图标文件夹变化，从SVG图标生成spritesheet和TypeScript类型。
• vite-plugin-abbrlink - 为指定目录下的markdown文件添加abbrlink属性。
• vite-plugin-native - 支持 Node/Electron C/C++ 原生插件。
• @yoichiro/vite-plugin-handlebars - 将 Handlebars 模板 .hbs 导入为 ES 模块。

帮助程序

• vite-tsconfig-paths - 支持 TypeScript 的路径映射。
• vite-aliases - 根据项目结构自动生成别名。
• vite-plugin-mkcert - 提供证书 https 开发服务器。
• vite-plugin-vconsole - 帮助开发者使用 vconsole 进行移动开发和调试。
• vite-plugin-mock-server - Mock 服务器插件，支持使用 TS 和 JS 编写 Mock API 和 HMR。
• vitawind - 自动安装和设置 Tailwind CSS。
• vite-plugin-restart - 文件更改时重启 Vite 服务器。
• vite-plugin-full-reload - 文件更改时重新加载浏览器。
• vite-plugin-tips - 页面提供更好的开发服务器状态提示。
• vite-plugin-external - 提供从运行时代码和输出包中排除依赖项的方法。
• unplugin-auto-import - 按需 API 自动导入。
• vite-plugin-inspect - 检查 Vite 插件的中间状态。
• vite-plugin-remove-console - 一个在生产环境中删除 console.log 的 vite 插件。
• vite-plugin-dev-manifest - 在开发服务器期间生成 manifest.dev.json，用于与任何语言/框架的后端集成。
• vite-plugin-watch-and-run - 监视一些文件 (glob) 并触发命令。使任何工具都有监视模式。
• vite-plugin-dynamic-base - 解析所有资源文件的动态 publicPath。
• vite-plugin-live-reload - 实时重新加载。
• vite-plugin-simple-vconsole - 应用内的调试控制台视图，可简化 SPA 和 MPA 的移动调试。
• vite-plugin-qrcode - 服务器启动时显示二维码。
• vite-plugin-cem - 生成 custom-elements.json 清单以描述自定义元素。
• vite-plugin-web-update-notification - 检测网页更新并通知用户重新加载。支持 vite 和 umijs。
• vite-plugin-browserslist-useragent - 将 browserslist 查询编译为 RegExp 以测试浏览器用户代理。
• vite-plugin-validate-env - 在构建时验证您的环境变量。再也不会忘记环境变量。
• vite-plugin-mock-data - 提供一种简单的数据模拟方法。
• vite-plugin-reverse-proxy - 有时我们需要在生产环境中重定向脚本来调试和解决问题，插件会将要提供的脚本从 text/javascript MIME 类型转换为 module MIME 类型。
• vite-plugin-conditional-compile - 基于环境变量的条件编译语法。
• vite-plugin-mock-dev-server - 用于开发的模拟服务器，支持 CJS/ESM/JSON、自动导入文件和 HMR。
• vite-plugin-api - 从目录树生成 API Routes 服务的路由映射。
• vite-plugin-shortcuts - 添加额外的自定义快捷键填充。
• vite-plugin-entry-shaking - 在开发模式下从入口文件导入代码时模拟 tree-shaking 行为。
• vite-plugin-auto-alias - 根据路径自动生成别名。
• vite-plugin-image-placeholder - 通过路径匹配生成占位图片。
• vite-plugin-find-image-duplicates - 在构建项目时查找项目中是否有重复的图片。
• @froxz/vite-plugin-s3 - 允许您上传文件到 S3。
• vite-plugin-vitepress-auto-sidebar - 基于 vitepress，通过扫描目录自动生成侧边栏数据。
• vite-plugin-global-const - 定义常量ts 以便重复使用您的代码。
• vite-plugin-cli-copy - 启动项目并自动复制终端的网络 URL。
• vite-plugin-module-list - 自动导入在指定文件夹中找到的模块。
• unplugin-info - 将构建信息导出为虚拟模块。
• vite-plugin-auto-origin - 根据传入到开发服务器的请求自动检测原始配置。
• vite-plugin-deadfile - 查找项目中未使用的源文件。
• vite-bundle-analyzer - 以交互式树形图形式呈现捆绑包的实用程序。
• vite-font-extractor-plugin - 通过字形缩小捆绑包字体的实用程序。
• vite-plugin-i18n-detector - 延迟加载 i18n 语言环境资源。
• vite-plugin-ngrok - 与 Ngrok 集成，让您轻松共享本地开发服务器。
• vite-plugin-docker - 基于 Dockerode 的 Docker 实用程序。
• vite-plugin-api-routes - 从目录树生成 API Routes 服务的路由映射。
• unplugin-detect-duplicated-deps - 检测重复的打包依赖项。
• vite-plugin-vitepress-auto-nav - 基于 VitePress，通过扫描目录自动生成 sidebar 和 nav 配置。
• vite-plugin-pretty-module-classnames - 将不带 -module 后缀的文件名添加到 CSS 模块的类名中。
• vite-plugin-serve-static - 允许提供不在 public/ 目录中的任意静态文件。
• vite-plugin-valibot-env - 根据 Valibot 模式验证环境变量。
• vite-plugin-vitest-cache - 通过缓存优化 Vitest 执行时间。

测试

• vitest - Vite 原生测试框架。
• vitest-mock-extended - Vitest 的类型安全模拟扩展。
• cypress-vite - 使用 Vite 运行 Cypress 规范。
• vite-plugin-doctest - Vitest 的文档测试。
• @poyro/vitest - 使用 Vitest 测试 LLM 集成。

安全

• vite-plugin-csp-guard - 允许您为项目配置内容安全策略，支持所有指令和哈希。

---

Vue

在本节中，我们使用徽章来指示每个插件的目标 Vue 版本。

仅适用于 Vue 2， 仅适用于 Vue 3， 适用于与两个版本兼容的插件。

💡 SSR 框架列在 SSR - 框架。

集成

• @vitejs/plugin-vue - 官方 Vue 3 支持。
• @vitejs/plugin-vue-jsx - 官方 Vue 3 JSX 支持。
• @vitejs/plugin-vue2 - 官方 Vue 2 支持。
• @vitejs/plugin-vue2-jsx - 官方 Vue 2 JSX 支持。
• vite-plugin-vue2 - Vue 2 集成。
• unplugin-vue2-script-setup - 为 Vue 2 启用 <script setup> 语法。

路由

• vite-plugin-pages - 基于文件系统的路由生成器。
• v-route-generate - 生成路由的工具。
• unplugin-vue-router - 官方实验性的基于文件的路由。
• vite-plugin-vue-routes - 基于文件的路由，类似 SvelteKit 和 Next.js App Router。

Loaders

• vite-plugin-md - Markdown 作为 Vue 组件 /Markdown 中的 Vue 组件。
• vite-svg-loader - 将 SVG 文件加载为 Vue 组件。
• vite-plugin-vue2-svg - 将 SVG 文件加载为 Vue 组件。
• unplugin-svg-component - 将 SVG 文件加载为 Vue 组件，支持 svg 文件 HMR 和 Typescript 智能提示。
• vite-plugin-markdown-mermaid - 加载 Markdown 文件，支持 Mermaid 渲染。
• vite-plugin-style-vw-loader - 将内联样式 px 转换为 vw。

SSG

• vite-ssg - 服务器端生成。

生态系统

• unplugin-vue-i18n - Vue I18n 集成。
• vite-plugin-i18n-resources - 加载 i18n 翻译信息文件。
• vite-plugin-i18n-autoimport - 自动导入组件的 i18n 配置文件。

Transformers

• vite-plugin-md-preview - Markdown 代码预览。
• vite-plugin-vue-preview - Vue SFC 在 Markdown 中的代码预览，支持在线编辑。
• vite-plugin-vue-css-modules - 隐式使用 CSS 模块来处理模板和脚本 SFC 标签，并进行静态替换。

助手

• unplugin-vue-components - 按需组件自动导入。
• vite-plugin-vue-gql - 适用于 Vue SFC 的 GraphQL 标签。
• vite-plugin-vue2-suffix - 兼容无 '.vue' 后缀。
• vite-plugin-vue-inspector - 点击浏览器元素时跳转到本地 IDE 源代码。
• vite-plugin-vue-static-sfc - 将“.vue”文件作为静态资产提供。
• vite-plugin-vue-devtools - 旨在增强 Vue 开发人员的体验。
• vite-plugin-vue-nested-sfc - 将 SFC 嵌套在您的 SFC 中。

---

React

官方

• @vitejs/plugin-react - 使用 Babel 的官方 React 支持。
• @vitejs/plugin-react-swc - 使用 SWC 的官方 React 支持。

预设

路由

• generouted - 客户端类型安全基于文件的路由和全局模式 — 支持布局、加载器、代码拆分等。
• unplugin-remix-router - 生成一个 React Router 文件，该文件依赖于 Remix v2 基于文件的路由器约定。

加载器

• vite-plugin-svgr - 将 SVG 转换为 React 组件。
• vite-plugin-react-rich-svg - 无缝 SVG 加载器，具有多种导入选项；例如 DataURI、SVGR 组件和原始 HTML 代码。

转换器

• @stylin/vite-plugin - 将 CSS 和 SCSS 模块转换为 React 组件。

框架

• vite-plugin-react-pages - 用于构建 React 应用的 Vite 框架。

助手

• vite-plugin-react-click-to-component - 使用 Vite 的启动中间件启用 alt+click 转到组件。

SSG

• vite-react-ssg - React 的静态站点生成。

💡 SSR 框架列在 SSR - Frameworks。

---

Preact

预设

• @preact/preset-vite - Preact 预设。HMR、自动 Preact 注入、在生产环境中删除 DevTools。

---

Svelte

集成

• vite-plugin-svelte - 添加 Svelte 支持。Svelte 团队的官方插件。

助手

• vite-plugin-kit-routes - 生成一个包含 SvelteKit 应用的所有路由、参数和操作的文件。

---

Solid

集成

• vite-plugin-solid - 为 Solid 提供 JSX 转换。
• vite-plugin-solid-svg - 将 SVG 文件导入为 Solid.js 组件。

路由

• generouted - 客户端类型安全基于文件的路由和全局模式 — 支持布局、加载器、代码拆分等。

---

Elm

集成

• vite-plugin-elm - 一个可让您编译 Elm 模块的插件。

---

Angular

集成

---

Fastify

集成

• vite-plugin-fastify - 带有热模块替换功能的 Vite Fastify 插件。

路由

• vite-plugin-fastify-routes - 基于文件的路由，类似于 SvelteKit 和 Next.js App Router。

---

Electron

集成

• electron-vite - 与 Vite 集成的 Electron CLI。

预设

---

Rollup 插件

• Vite Rollup 插件 - 官方 rollup 插件的兼容性列表。

包含在 Vite 中

• @rollup/plugin-alias - 定义和解析捆绑依赖项的别名。
• @rollup/plugin-commonjs - 将 CommonJS 模块转换为 ES6。
• @rollup/plugin-dynamic-import-vars - 解析包含变量的动态导入。
• @rollup/plugin-json - 将 .json 文件转换为 ES6 模块。

Vite 中默认涵盖

• @rollup/plugin-babel - 使用 Babel 编译文件。
• @rollup/plugin-buble - 使用 buble 编译 ES2015。
• @rollup/plugin-data-uri - 从 Data URI 导入模块。
• @rollup/plugin-html - 创建 HTML 文件以提供 Rollup 包。
• @rollup/plugin-node-resolve - 在 node_modules 中定位并捆绑第三方依赖项。
• @rollup/plugin-sucrase - 使用 Sucrase 编译 TypeScript、Flow、JSX 等。
• @rollup/plugin-typescript - Rollup 与 TypeScript 之间的集成。
• @rollup/plugin-wasm - 使用 Rollup 导入 WebAssembly 代码。
• @rollup/plugin-url - 将文件导入为数据 URI 或 ES 模块。

与 Vite 兼容

• @rollup/plugin-beep - 系统在出现错误和警告时发出蜂鸣声。
• @rollup/plugin-dsv - 使用 d3-dsv 将 .csv 和 .tsv 文件转换为 JavaScript 模块。
• @rollup/plugin-eslint - 使用 ESLint 验证入口点和所有导入的文件。
• @rollup/plugin-graphql - 将 .gql/.graphql 文件转换为 ES6 模块。
• @rollup/plugin-image - 导入 JPG、PNG、GIF、SVG 和 WebP 文件（需要 enforce: 'pre'）。
• @rollup/plugin-inject - 扫描模块中的全局变量并在必要时注入导入语句。
• @rollup/plugin-legacy - 向旧式非模块脚本添加导出声明。
• @rollup/plugin-replace - 打包时替换文件中的字符串。
• @rollup/plugin-strip - 从代码中删除调试器语句和函数。
• @rollup/plugin-virtual - 一个从内存加载虚拟模块的 Rollup 插件。
• @rollup/plugin-yaml - 将 YAML 文件转换为 ES6 模块。
• rollup-plugin-graphql-codegen - 为 worker_threads 中的 GraphQL 标签模板字符串生成类型定义。
• rollup-plugin-i18next-dts-gen - 从中​​生成类型定义i18n JSON 文件用于代码提示和验证。

社区

• 查看 Awesome Rollup 列表 以了解社区维护的 rollup 插件，并参阅 Vite 文档中有关 rollup 插件兼容性 的部分。

SSR

库

• Vike - 与 Nuxt/Next.js 类似，但作为一款只做一件事并做得很好的插件。
• ssr - 与 Webpack/Vite 结合的服务器端渲染框架。
• vavite - 用于开发和构建具有实时重新加载功能的服务器端应用程序的工具。
• vue-ssr - 用于开发和运行由 SSR 驱动的 Vue 应用程序的极简包装器。
• vite-ssr-boost - 用于基于 react-router 创建出色应用程序的服务器端渲染库。
• SSRx - 在 Vite 之上添加一层薄层，用于构建具有出色 DX 的现代 SSR 应用。
• Vinxi - 全栈 JavaScript SDK。允许将 SSR 添加到 Vite 应用。

框架

• Rakkas - 受 Next.js 和 SvelteKit 启发的 React 框架。
• Vise - 带有服务器挂钩的 SSR 框架。
• @fastify/fastify-dx - 允许您提供静态或实时 (SSR)。
• vite-plugin-vercel - Vercel 适配器。
• vite-vlugin-vercel-skew-protection - 帮助配置 Vercel Skew Protection。

与后端集成

Adob​​e Experience Manager

Craft CMS

• Craft Vite - 用于与 Craft CMS 集成的插件。

Django

• django-vite - 用于 Django 应用程序的集成。
• django-vite-plugin - 集成 Django 应用程序（包括 vite 插件）。

Flask

• Flask-Vite - 与 Flask 集成。

Ruby on Rails

• vite-plugin-ruby - Ruby 后端配置。

• Vite Ruby - 集成 Rails、Hanami、Padrino 和 Rack 应用程序。

Laravel

• Laravel Vite - 集成 Laravel 框架。
• Laravel Vite 插件 - Laravel Vite 官方插件。

CakePHP

• cakephp-vite - CakePHP 集成。

WordPress

• wordpress-vite-assets - WordPress 主题集成。
• Kima - 带有 Twig 的入门主题。
• WordPlate - 带有 Composer 的入门应用程序。

TYPO3 CMS

• vite-plugin-typo3 - TYPO3 CMS 的前端集成。
• TYPO3 的 vite-asset-collector - TYPO3 CMS 的后端集成。

Go

• vite - 与 Go 集成。

Rust

• create-rust-app - Rust Web 应用的集成。

OctoberCMS

Symfony

• Vite Bundle - Symfony 的集成。

Shopify

• vite-plugin-shopify - Shopify 主题的集成。

CodeIgniter

DDEV

Node.js

• vite-express - Express Web 应用的集成。
• vite-manifest-parser - 解析 manifest.json 以生成 HTML 脚本和链接标签。

ASP.NET Core

• Vite.AspNetCore - 与 ASP.NET Core 项目集成。

Drupal

• Vite 模块 - Drupal 的后端集成。
• vite-plugin-twig-drupal - 支持 Twig，包括/嵌入和 Drupal 特定的 twig 功能。

PHP

• PHP-Vite - 集成 PHP、Composer 包，无框架依赖项。
• PHP-Vite Starter Repo - 入门存储库，具有 TypeScript/JavaScript、Tailwind CSS、SASS/SCSS、EJS、SVG 和图像支持。
• php-vitelinker - 构建包后生成可包含 PHP 文件的 CLI 工具。

迁移

Vue CLI

React

• Viject - Create React App 的一次性迁移工具。

使用 Vite.js 的项目

开源

• VitePress - 由 Vite 和 Vue 提供支持的静态站点生成器。
• Slidev - 面向开发人员的演示幻灯片。
• Astro - 现代静态网站构建器。
• Hathora - 多人游戏框架。
• Nhost - Nhost 是一款使用 GraphQL 的开源 Firebase 替代品。
• Ladle - 用于开发和测试由 Vite 和 React 提供支持的组件故事的工具。
• IslandJS - 基于岛屿架构的静态网站生成器。
• Vituum - 使用预定义配置、集成和模板引擎包装 Vite。
• Compiiile - 预览或托管包含 Markdown 文件的文件夹，并带有全文搜索和演示幻灯片。
• Gracile - 由 Lit SSR 提供​​支持的元框架。
• @lazarv/react-server - React 元框架。
• WXT - 用于构建 Web 扩展的框架，具有与 Nuxt 相同的 DX。

应用/网站

• Icônes - 具有即时搜索功能的图标浏览器。
• Awesome CN Café - Awesome CN Café 的 Web 应用程序。
• Todo 示例 - 具有路由和状态管理功能的 Todo 应用。
• aitrack.work - 一款基于任务的时间跟踪器，适合日常使用。
• Svelte 中的 macOS - Svelte 中的 macOS 桌面 Web 体验。
• vue3-realworld-example-app - 使用 Vue 3 + TypeScript + Composition API 实现的真实世界应用程序。
• react-device-frameset - 这是 React 的另一个设备框架集组件。
• Preview.js - 一个 IDE 扩展，可即时预览 React、Vue 2 和 Vue 3 组件。
• pointer-lock-movement - 一个指针锁定移动管理器，可用于自定义您自己的创意 UI。
• vite-run - 支持 vite 的多种配置执行，可以像堆叠区块一样自由组合配置。
• Dataviz Explorer - 使用 Highcharts、Chart.js、React、JavaScript、Material UI 和 带有覆盖率报告的 GitHub Actions 进行大型 CSV、数据库和实时可视化的工具。