Vite使用宝典。精选 Vite.js 相关的资源推荐

资源

官方资源

• 文档
• GitHub 仓库
• 发布说明
• Vue 3 文档
• Awesome Vue
• 从 v4 迁移

开始使用

• create-vite - 创建您的第一个 Vite 项目脚手架。
• create-vitawind - Tailwind CSS 项目的脚手架。
• create-electron-vite - 搭建您的 Electron + Vite 项目。
• create-vite-app - 搭建您的开箱即用的 Vite 项目。
• create-nx-workspace - 搭建一个 Nx + React + Vite + Vitest 的项目。
• bati - 快速搭建 Vike 项目。
• create-awesome-node-app - 通过选择不同的模板来构建你的项目骨架。
• create-nitro-app - 使用 Nitro 为您的全栈 Vite 项目创建脚手架。

模板

Vanilla

• vite-vanilla-ts-lib-starter - TypeScript 库启动模板（CJS、ESM、IIFE），包含 ESLint、Stylelint、Prettier、Jest、Husky + lint-staged。
• vite-tailwind-nojs-starter - 无 JavaScript 的 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、嵌套、Autoprefixer、CSS Nano 和 CSS Reset 的启动模板。
• vite-starter-markup-template - Markup 的启动模板。
• create-domco - domco 的启动模板。
• vite-vanilla-library-template - TypeScript、ESLint、Vitest、Husky、Conventional Commits、GitHub actions 的启动模板。
• vite-alpine-template - Alpine 的启动模板。
• vite-ts-lib-starter - 使用 TypeScript、Bun、Vitest、Prettier、Renovate 和 np 的库启动模板
• vite-swagger-ui - 内置支持多 API 的 Swagger UI
• template-vite - 一个带有 Phaser 的官方快速启动模板。
• template-vite-ts - 一个带有 Phaser 和 TypeScript 的官方快速启动模板。
• vite-ts-bulma-sass-template - 启动模板 TypeScript、Bulma、Sass、Stylelint、Biome。

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 快速启动模板。
• naive-ui-dashboard-template - 友好的 UI，Vue 3 + TSX + Tailwind CSS 2 JIT + PostCSS + Naive UI。
• Vitawind Creator - 快速创建 Tailwind CSS 项目。
• vue3-tailwind3-website-starter - Vue3 / Vite / Tailwind CSS 网站快速启动模板，每页都有指南。
• 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 Router。
• vite-vue-js-starter-template - Vite + Vue3 + JavaScript + Vue Router + Pinia + TDesign + ESLint + Stylelint + Prettier 简单模板。
• vue-xs-admin - 基于 Vue3、Vite3、ElementPlus、TypeScript、Pinia 和 VueRouter。
• vulcan - 移动应用程序模板。使用 Vite、Vue 3、TypeScript、Sass、i18n、Vitest&Cypress、Pinia、APIs&Mock、ESLint、Prettier 和自动导入。
• 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 - 基于 Vue3、Vite4、TS5 和 Ant-Design-Vue4 的启动模板。
• vue-file-upload - 基于 Vue3 和 TypeScript 构建的文件管理系统，支持单文件和多文件上传，并具有预览功能。
• arco-admin - Vite + ArcoDesign + TypeScript 遵循 ESM 标准，提供开箱即用、标准化、功能丰富的中后台管理系统模板。
• materio-free-vuetify-nuxtjs-admin-template - Vue.js 3、Vite 5、Vuetify 3 & Nuxt.js 3。
• vite-plugin-vue-style-bundler - 自动将 Vue/sfc 样式捆绑成 JavaScript。
• celeris-web - 基于 Vite + Vue3 + TypeScript + Vue-Router + Pinia + Unocss + Naive UI + pnpm 单体仓库的模板。
• vite-ts-starter - Vue I18n 动态路由本地化模板，使用 UnoCSS + Unplugin + Element-Plus + Vitest + TypeScript + Vue-Router + Vuex + Scss + ESLint + Stylelint + Husky + lint-staged 开发的国际化应用。
• vite-vue3-tailwind4-daisyui5-starter-template - 包含 Vue 3 + Vite + Tailwind CSS 4 + DaisyUI 5 + Sass 的启动模板。

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 - 支持 TypeScript 的 Vuetify 管理员启动模板，并提供 Vuetify 组件的智能感知功能。

React

• Vitamin - React TypeScript、Tailwind CSS、SPA + PWA、Cypress 和 CI。
• vite-template-react - 类似于 Create React App 的模板。
• vitejs-template-react-rescript - React + ReScript.
• template-vite-react - 一个极简的 React Vite 启动模板。
• reactjs-vite-tailwindcss-boilerplate - React 18, TypeScript, Vitest, Testing Library, Tailwind CSS 3, Eslint 和 Prettier。
• vite-react-ts-tailwind-firebase-starter - 使用 Vite + React + TypeScript + Tailwind CSS (daisyUI) + Firebase (v9) + Prettier + ESLint 的启动模板。
• create-react-app-vite - React, TypeScript, Tailwind CSS, MSW, Vitest, React Testing Library, ESLint, Prettier, GitHub Actions.
• chrome-extension-boilerplate-react-vite - React + TypeScript + SASS + Prettier + ESLint + GitHub Actions + HMR(Hot Module Reload) + Turborepo + Chrome Extension Manifest v3.
• vite-rtk-query - React, TypeScript, Redux Toolkit, RTK Query, Tailwind CSS, MSW, Jest, React Testing Library, ESLint, Prettier.
• vite-react-proste - React + TypeScript + react-router-dom + Recoil + SASS + Testing Library + 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 + 绝对导入 + 提交检查。
• 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 imports.
• 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, Tailwind CSS, 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 + Tailwind CSS + Prettier + ESLint 集成的模板。
• vite-react-chakra-starter - 用于创建带有 TypeScript 和 Chakra UI 的 React 应用的起始模板。配置了 ESLint、Prettier 和 Husky。
• vite-react-tailwind-starter - 用于创建带有 TypeScript 和 Tailwind CSS 及 Shadcn UI 的 React 应用的起始模板。配置了 ESLint、Prettier 和 Husky。
• monorepo-template-react - 用于 SSR、SPG、SPA 和 API 提供的 React + TypeScript 模板。
• vite-react-dapp-template - 用于去中心化应用前端开发的启动模板，预配置了钱包认证、i18n 和 UI 功能。
• vite-express-ssr-ts - React + TypeScript + Express.js + Vite SSR 模板，内置 API 功能。
• vite-react-flow-template - React Flow 启动模板。
• react-vite-template - React、TypeScript、Vite、Mantine、Million、Husky、Prettier、Import Sorter、Lint-staged。
• gravity-ui-vite-template - Gravity UI 生态系统模板（React、TypeScript、Gravity UI、Vite、Husky、ESLint、Prettier、Lint-staged）。
• vite-react-component-library-starter - 用于创建 React 组件库的 TypeScript、Tailwind CSS、Storybook、Vitest、ESLint、Prettier、Husky 和 GitHub Action 的启动模板。
• vite-template-awesome-soho - 用于创建 React 18、JavaScript + JSDoc、React Router、Ant Design、ESLint、EditorConfig、.env、SonarLint 和 Vitest 的 DevContainer 模板。
• react-component-library-vite - 用于 React、JavaScript、Styled-Components、Vitest 和 React Testing Library 的库模板。
• ReTail - 使用 Remix、TypeScript、Tailwind CSS、Prettier 和 ESLint 构建 Full Stack 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 构建网络应用的起始模板。
• 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 - 基于 Remix 文件路由规范的 React 启动模板，包含 react-router、UnoCSS、LinguiJs、zustand 等众多特性。
• RVTGB - 基于 React + TypeScript 的启动模板，支持使用 Generouted 和 Biome 的文件路由。

vite-biome-tailwind-template - React, TypeScript, Biome, Tailwind CSS.

• React Dapp Starter - 企业级 Web3 DApp 开发框架，包含 TypeScript、Tailwind CSS、Web3Modal、Wagmi、Shadcn UI、Zustand 和 TanStack Query，适用于可扩展的去中心化应用。
• vite-template-react-ts-jest - React + TypeScript + Jest.

vite-amplify - 带有 SSR + Express API + AWS Amplify 托管的模板。

• react-component-library-template - 一个包含 React、TypeScript、Vitest、React Testing Library、Storybook、Biome 和 Stylelint 的组件库模板。
• react-boilerplate - 使用 Eslint + Husky + Prettier 快速启动的模板。
• react-admin-dashboard - 包含 TypeScript、Vite、Ant Design、React Router、Zustand 和 Ant Design Charts 的仪表盘模板。
• vite-plugin-ssr-config - 使用 React、React-Query 和 React-Router 配置服务器端渲染（SSR）。
• portfolio-vite-manifest - 使用 Vite、React、TypeScript 和 Manifest 的全栈作品集模板。

Svelte

• SvelteKit - 构建 Svelte 应用的最快方式。
• svelte-vite-ssr - 支持 SSR 的 Svelte。
• template-vite-svelte-ts-tailwind - Svelte + TypeScript + Tailwind CSS + Prettier.
• vite-svelte-flow-template - Svelte Flow starter template.
• vite-svelte-docker-template - Docker + Svelte + Vitest.

固态

• vitesse-solid - Opinionated Vite + SolidJS Starter Template. Includes TypeScript, ESLint, Prettier, UnoCSS, HopeUI and more.
• 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 - 使用 Vite 作为前后端构建的 Electron 应用，支持自动发布。
• vite-reactts-electron-starter - React、Tailwind CSS、TypeScript 和 Electron。
• electron-vue-template - 包含 TypeScript 的 Electron 模板，并集成 Electron Builder。
• 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 主进程。

Tauri

• HuLa - 是基于 Vite 5 + Vue 3 + TypeScript + Tauri 构建的桌面即时通讯应用程序（不仅仅是即时通讯）。

Neutralino

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

Elm

• vite-elm-template - 用于构建 Elm 应用的默认模板。
• elm_vite_tailwind_template - 使用 Tailwind CSS 和 Daisy UI 构建 Elm 网页应用的推荐模板。

F# and Fable

• vite-plugin-fable - 带有 .fs 和 .fsproj 文件以及 F# 编译器的模板。

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 扩展程序 Manifest v3。
• vite-vue3-chrome-extension-v3 - 用于 Chrome、Firefox 和 Edge 的 Web 扩展模板。

插件

[!IMPORTANT]
有一个 Vite 插件注册中心 ，列出了发布到 npm 的插件。
下面的列表未更新。

与框架无关的插件

集成

• @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 输出和浏览器控制台中显示 linter 输出，包含 ESLint 和 TypeScript。
• vite-plugin-checker - 在工作线程中以覆盖和终端提示的方式快速运行检查器（TypeScript/VLS/vue-tsc 等）。
• vite-plugin-tauri - 将 Tauri 集成到 Vite 项目中，以构建跨平台应用。
• vite-plugin-federation - 支持模块联邦，灵感来自 Webpack 模块联邦功能。
• vite-plugin-wasm-pack - 与 rust wasm-pack 集成，简单易用。
• vite-plugin-comlink - 使用 Comlink 的强大功能与 WebWorkers 一起使用，使其更加愉悦。
• vite-plugin-sass-dts - 这是一个插件，在使用 CSS 模块时可以安全地自动创建类型文件。
• vite-plugin-ali-oss - 将项目中捆绑的生产文件上传到 Ali OSS，但排除 HTML。
• vite-plugin-webfont-dl - 下载并注入网络字体（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 下的任何页面，可以设置前缀名。
• vite-plugin-html-template-mpa - 多页面通用模板支持。
• vite-plugin-vconsole-mpa - 支持多页面的 Vconsole，配置简单。
• vite-plugin-browser-sync - BrowserSync。
• vite-plugin-jspm - 使用 import maps 和 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 pages function 集成。
• @storybook/builder-vite - Storybook 构建器。
• @builder.io/partytown - 将资源密集型第三方脚本从主线程移至 Web Worker。
• vite-plugin-dynamic-proxy - 根据 URL 参数自动配置反向代理。
• unplugin-auto-export - 自动维护 index.ts 文件中的导出语句。
• remix-development-tools - Remix.run 开发工具的插件。
• vite-plugin-legacy-swc - 使用 SWC 支持 legacy 浏览器。
• vite-plugin-biome - Biome 代码检查工具。
• vite-plugin-oxlint - Oxlint 代码检查工具。
• @tomjs/vite-plugin-electron - 轻松开发 Electron 应用程序。
• @tomjs/vite-plugin-vscode - 简单使用 Web 框架开发 VSCode 扩展的 Webview，并支持 HMR 和 Debug。
• vite-plugin-px-rem-vw - 集成 PostCSS 插件 pxTorem 和 pxTovw。
• vite-plugin-mpg - 多页面应用程序的简单配置。
• vite-plugin-pagefind - 集成 pagefind 搜索。
• @mistjs/vite-plugin-px2viewport - 一个插件，可自动将内联样式和样式文件中的 px 单位转换为 vw 单位。
• vite-multiple-assets - 添加对多个公共资产目录的支持。
• vite-create-production-server-plugin - 在构建后启动生产 HTTP 服务器。
• vite-plugin-eslint2 - 同步/异步运行 ESLint。
• vite-plugin-page-html - 多页面通用模板插件，支持 ejs 模板语法。类似于 vue-cli 页面配置。
• vite-plugin-vanilla - 纯 vanilla 多页面网页开发模式。
• genaicode/vite-plugin - 将 AI 编码助手嵌入应用 UI 的插件。
• vite-plugin-year - 在构建过程中将当前年份插入 HTML 文件。可用于向 HTML 文件添加版权年份。
• vite-plugin-llms - 用于 llms.txt 规范的集成，支持 AI 优化内容以及应用路由。
• module-federation/vite - 官方模块联邦集成，实现动态远程模块加载。

加载器

• unplugin-icons - 访问数千个图标作为组件。
• vite-imagetools - 使用 URL 查询参数加载和转换图像。
• vite-plugin-radar - 集成式分析加载器（支持 7+ 提供商）。
• vite-plugin-glsl - 导入着色器文件片段。
• vite-plugin-svgo - 将 SVG 作为纯字符串加载并使用 SVGO 库进行转换。
• vite-plugin-remark-rehype - 使用 unified 生态系统加载和转换 markdown 文件。
• vite-plugin-php - 加载并处理 PHP-entry 文件，而不是默认的 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 数据。
• @responsive-image/vite-plugin - 转换并生成优化的响应式图像（WebP、AVIF）和 LQIP 占位符，用于图像组件。
• @goodforyou/vite-plugin-markdown-import - 直接将 Markdown 文件导入为字符串，支持将 front-matter 属性导入为对象。

打包

• rollup-plugin-critical - 生成关键 CSS。
• vite-plugin-dts - 从 .ts 或 .vue 源文件为库生成声明文件。
• 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 - 在构建包之后复制文件。

• unplugin-imagemin - 基于 squoosh 和 sharp 的高性能图片压缩插件。

vite-plugin-image-optimizer - 在构建时使用 Sharp.js 和 SVGO 优化（压缩）您的图像资源。

• vite-plugin-no-bundle - 用于原生 ESM 或其他打包器生成未打包代码。
• vite-plugin-css-injected-by-js - 将 CSS 添加到页面中。
• unplugin-zip-pack - 带有过滤函数支持，压缩您的 dist 文件。
• vite-plugin-singlefile - 将所有 JavaScript 和 CSS 资源直接内联到最终的 dist/index.html 文件中。
• vite-plugin-node-polyfills - 为浏览器环境提供 Node 核心模块的 Polyfill。
• 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 混淆器。
• @yuanjianming/unplugin-image-convert - 基于 sharp.js 的图像多格式转换插件。
• vite-plugin-dynamic-chunk - 将依赖项在入口和动态入口之间拆分，并合并小代码块。
• @yuanjianming/unplugin-compress-svga - 压缩 SVGA。
• @yuanjianming/unplugin-font-spider - 一个网络字体压缩插件。

vite-plugin-static-filehash - 它可以帮助程序提高缓存命中率。
vite-plugin-singlefile-compression - 压缩所有资源并将它们嵌入到 dist/index.html 中，方便作为单个 HTML 文件共享。

• vite-plugin-builder - 支持服务端渲染（SSR）和客户端渲染（CSR）的双编译功能。

转换器

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 - 在多仓库项目中共享 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 - 根据你的构建资源，向你的 index.html 注入 <link rel="preload">。
• @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 - 自动使用包版本 / git 提交 / 自定义内容插入到您的项目中，作为项目版本的唯一标识符。
• vite-plugin-css-export - 将 CSS 中的变量导出到 JavaScript，并支持嵌套规则。
• vite-plugin-optimize-css-modules - 在使用 CSS-Modules 时，生成尽可能小的 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 - 在库模式下提取资源文件，而不是将它们嵌入为 base64 格式。
• css-media-splitter/vite-plugin - 将所有 @media 规则提取到独立的 .css 文件中，并在匹配媒体查询时才下载。
• @tomjs/vite-plugin-html - 支持对 index.html 进行压缩、加载、CDN 等操作。
• @tomjs/vite-plugin-iconify - 将 IconifyProviders 全局变量注入到 index.html 中以支持 iconify，并支持局域网和自定义 URL。

vite-plugin-icons-spritesheet - 通过监听图标文件夹的变化，生成 spritesheet 和 TypeScript 类型，从 SVG 图标中提取。

• vite-plugin-abbrlink - 在指定的目录中的 markdown 文件中添加 abbrlink 属性。
• vite-plugin-native - 支持 Node/Electron C/C++原生插件。
• @yoichiro/vite-plugin-handlebars - 将 Handlebars 模板 .hbs 作为 ES 模块导入。
• vite-plugin-magic-preloader - 通过魔法注释生成 <link rel="prefetch" /> 或 <link rel="preload" /> 标签，并将其注入到 index.html 中。
• vite-plugin-replace-lodash - 将 lodash 的导入替换为 lodash-es 更有利于树摇动。
• vite-plugin-dynamic-prefetch - 在运行时为动态模块向 HTML 文件注入 <link rel="prefetch" /> 标签。
• vite-plugin-material-symbols - 基于源代码分析选择性加载 Material Symbols 字体图标。

助手

• vite-tsconfig-paths - 支持 TypeScript 的路径映射。
• vite-aliases - 基于项目结构自动生成别名。
• vite-plugin-mkcert - 提供证书以启用 https 开发服务器。
• vite-plugin-vconsole - 帮助开发者使用 vconsole 以便简化移动开发与调试。
• vite-plugin-mock-server - 模拟服务器插件，支持使用 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 - 动态解析所有资源文件的公共路径。
• 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 查询编译为正则表达式，用于测试浏览器 useragent。
• 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 路由服务的路由映射。
• vite-plugin-shortcuts - 添加额外的自定义快捷键配置。
• vite-plugin-entry-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 - 定义常量以重用您的代码。
• vite-plugin-cli-copy - 启动项目并自动复制终端的网络 URL。
• vite-plugin-module-list - 自动导入指定文件夹中找到的模块。
• unplugin-info - 将构建信息作为虚拟模块导出。

vite-plugin-auto-origin - 根据开发服务器接收的请求自动检测 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 路由服务的路由映射。
• unplugin-detect-duplicated-deps - 检测重复的打包依赖。
• vite-plugin-vitepress-auto-nav - 通过扫描目录，基于 VitePress 自动生成侧边栏和导航配置。
• vite-plugin-pretty-module-classnames - 将不带 -module 后缀的文件名添加到 CSS 模块的类名中。
• vite-plugin-serve-static - 允许服务 public/ 目录之外的任意静态文件。
• vite-plugin-valibot-env - 根据 Valibot 模式验证环境变量。
• vite-plugin-vitest-cache - 通过缓存优化 Vitest 执行时间。
• vite-preload - 预加载服务器渲染的懒加载模块和样式表，使用 103 Early Hints、Link 头或 link 标签。
• vite-plugin-envtype-patch - 为 import.meta.env 生成类型信息。

测试

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

安全

• vite-plugin-csp-guard - 允许您为项目配置内容安全策略，支持所有指令和哈希。
• vite-plugin-csp - 单页应用的内容安全策略 (CSP)。自动计算资源哈希值（SRI），检测 Google Fonts。支持 Bun 和 Node.js 运行时。

Vue

[v23]: https://img.shields.io/badge/-2%2F3-3C8171
[v2]: https://img.shields.io/badge/-v2-42b883
[v3]: https://img.shields.io/badge/-v3-35495e

集成

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

路由

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

加载器

• !v23] [vite-plugin-md - 将 Markdown 作为 Vue 组件 / 在 Markdown 中使用 Vue 组件。
• !v3] [vite-svg-loader - 将 SVG 文件作为 Vue 组件加载。
• !v2] [vite-plugin-vue2-svg - 将 SVG 文件作为 Vue 组件加载。
• !v3] [unplugin-svg-component - 将 SVG 文件加载为 Vue 组件，支持 SVG 文件 HMR 和 TypeScript 智能提示。
• !v23] [vite-plugin-markdown-mermaid - 加载 Markdown 文件，支持 Mermaid 渲染。
• !v3] [vite-plugin-style-vw-loader - 将内联样式 px 转换为 vw。

SSG

• !v3] [vite-ssg - 服务器端生成。

生态系统

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

转换器

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

助手

• !v23] [unplugin-vue-components - 按需自动导入组件。
• !v3] [vite-plugin-vue-gql - Vue SFC 的 GraphQL 标签。
• !v2] [vite-plugin-vue2-suffix - 兼容不带 '.vue' 后缀。
• !v23] [vite-plugin-vue-inspector - 点击浏览器中的元素时，跳转到本地 IDE 源代码。
• !v23] [vite-plugin-vue-static-sfc - 将".vue"文件作为静态资源提供服务。
• !v3] [vite-plugin-vue-devtools - 设计用于增强 Vue 开发者体验。
• !v3] [vite-plugin-vue-nested-sfc - 在您的 SFC 内部嵌套 SFC。
• !v3] [vite-plugin-vue-style-in-template - 从模板中提取样式标签。

React

官方

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

预设

路由

• generouted - 客户端类型安全的基于文件的路由和全局模态框 — 支持布局、加载器、代码拆分等。
• unplugin-remix-router - 生成一个 React Router 文件，依赖于 Remix v2 基于文件的路由约定。
• vite-plugin-remix-flat-routes - 基于 Remix-flat-routes 约定的路由，与 react-router 数据 API 路由兼容。

加载器

• 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+点击跳转到组件。

SSG

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

💡 SSR 框架列表位于SSR - 框架。

Preact

预设

• @preact/preset-vite - Preact 预设。热模块替换(HMR)、自动注入 Preact、生产环境中移除 DevTools。

Svelte

集成

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

助手

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

Solid

集成

• vite-plugin-solid - 提供 JSX 转换功能用于 Solid。
• 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 命令行工具。

预设

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 URIs 导入模块。
• @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

[react]: https://img.shields.io/badge/-React-4ab2cf
[vue2]: https://img.shields.io/badge/-Vue%202-42b883
[vue3]: https://img.shields.io/badge/-Vue%203-42b883
[svelte]: https://img.shields.io/badge/-Svelte-db552a

库

• Vike - 类似 Nuxt/Next.js，但作为一个做一件事情并把它做好插件。 ![react] ![vue3] ![vue2] ![svelte]
• ssr - 一个结合了 Webpack/Vite 的服务器端渲染框架。 ![react] ![vue3] ![vue2]
• vavite - 一个用于开发和构建具有热重载功能的服务器端应用程序的工具。
• vue-ssr - 用于开发和运行基于 SSR 的 Vue 应用的极简封装。 ![vue3]
• vite-ssr-boost - 基于 react-router 的服务器端渲染库，用于创建出色的应用。 ![react]
• SSRx - 基于 Vite 的现代 SSR 应用开发轻量级层，提供愉悦的开发体验。
• Vinxi - 全栈 JavaScript SDK。允许将 SSR 添加到 Vite 应用中。
• domco - 极简全栈 JavaScript。将 Vite 应用转换为全栈应用，依赖极小。

框架

• Rakkas - 受 Next.js 和 SvelteKit 启发的 React 框架。 ![react]
• Vise - 带有服务器钩子的 SSR 框架。 ![react] ![vue3]
• @fastify/fastify-dx - 允许你提供静态或动态（SSR）内容。
• vite-plugin-vercel - Vercel 适配器。
• vite-vlugin-vercel-skew-protection - 帮助配置 Vercel Skew Protection。

与后端集成

Adobe 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 的前端集成。
• vite-asset-collector for TYPO3 - TYPO3 CMS 的后端集成。

Go

• vite - 与 Go 集成。

Rust

• create-rust-app - 用于 Rust Web 应用的集成。
• vite-rs - 将资源嵌入到您的 Rust 二进制文件中。

OctoberCMS

Symfony

• Vite Bundle - Symfony 的集成。

Shopify

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

CodeIgniter

DDEV

Node.js

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

ASP.NET Core

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

Drupal

• Vite 模块 - Drupal 的后端集成。
• vite-plugin-twig-drupal - 支持 Twig 的 includes/embeds 和 Drupal 特定的 twig 功能。

PHP

• PHP-Vite - 针对 PHP 的集成，Composer 软件包，无框架依赖。
• PHP-Vite Starter Repo - 启动仓库，包含 TypeScript/JavaScript，Tailwind CSS，SASS/SCSS，EJS，SVG 和图像支持。
• php-vitelinker - 一个 CLI 工具，在构建包后生成可包含的 PHP 文件。

数据迁移

Vue CLI

React

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

使用 Vite.js 的项目

开源

• VitePress - 由 Vite 和 Vue 驱动的静态网站生成器。
• Slidev - 开发者的演示幻灯片。
• Astro - 现代静态网站构建器。
• Hathora - 多人游戏框架。
• Nhost - 基于开源的 Firebase 替代品，支持 GraphQL。
• Ladle - 一个基于 Vite 和 React 开发和测试组件故事的工具。
• IslandJS - 基于岛屿架构的静态网站生成器。
• Vituum - Vite 的封装器，具有预定义的配置、集成和模板引擎。
• Compiiile - 预览或托管包含 Markdown 文件的文件夹，支持全文搜索和演示幻灯片。
• Gracile - 由 Lit SSR 驱动的元框架。
• @lazarv/react-server - 一个 React 元框架。
• WXT - 用于构建网络扩展的框架，具有与 Nuxt 相同的开发体验。
• Revili - 命令行和图形界面集成工具。

应用/网站

• Icônes - 带即时搜索的图标探索器。
• Awesome CN Café - Awesome CN Café 的 Web 应用程序。
• Todo Example - 具有路由和状态管理的 Todo 应用程序。
• aitrack.work - 日常使用的基于任务的计时器。
• macOS in Svelte - 在 Svelte 中为 Web 提供的 macOS 桌面体验。
• vue3-realworld-example-app - 使用 Vue 3 + TypeScript + Composition API 实现的 Realworld 应用程序。
• react-device-frameset - 这是另一个用于 React 的设备框架组件。
• Preview.js - 一个 IDE 扩展，可即时预览 React、Vue 2 和 Vue 3 组件。
• pointer-lock-movement - 一个指针锁定移动管理器，用于自定义您的创意 UI。
• vite-run - 支持 Vite 的多配置执行，可像堆叠积木一样自由组合配置。
• Dataviz Explorer - 用于大型 CSV、数据库和实时可视化的工具，支持使用 Highcharts、Chart.js、React、JavaScript、Material UI 和 GitHub Actions 进行交互式绘图，并提供覆盖率报告。