awesome vite

很棒的 Vite.js

与 Vite.js 相关的精彩内容精选列表

目录

使用右上角的“目录”菜单来浏览列表。

资源

官方资源

• 文档

• GitHub 存储库

• 发行说明

• Vue 3 文档

• 很棒的 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 - 在不同模板之间选择的脚手架项目。

模板

香草

• vite-vanilla-ts-lib-starter - 使用 TypeScript、ESLint、Stylelint、Prettier、Jest、Husky + lint-staged 的​​库（CJS、ESM、IIFE）的启动器。

• 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 - 标记的入门模板。

• create-domco - domco 的入门模板.

• vite-vanilla-library-template - 入门模板 TypeScript、ESLint、Vitest、Husky、常规提交、GitHub 操作。

• vite-alpine-template - Alpine 的入门模板.

• vite-ts-lib-starter - 使用 TypeScript、Bun、Vitest、Prettier、Renovate 和 np 的库的入门模板。

• vite-swagger-ui - Swagger UI 内置支持多个 API.

视图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 + 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 + project presets .

• 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 + 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 -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-staged​​国际化应用程序.

视图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 TypeScript、TailwindCSS、SPA + PWA、Cypress 和 CI。

• vite-template-react - 创建类似 React 应用程序的模板。

• vitejs-template-react-rescript -React + ReScript。

• 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 -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 + 绝对导入 + Commit linting。

• React 入门套件 - Jamstack、React、React Router、Material UI、Firebase Auth、TypeScript、ESLint、Prettier、Jest、GitHub Actions。

• vite-mern-template -React 18 + TypeScript + Vite + Redux 工具包 + ESLint + React Router DOM + Axios + React Icons + React Toastify + Express + Mongoose.

• Varsarr - React、Typescript、Styled-Components、Recoil、React-Query、Axios、绝对导入。

• 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，预提交。

• 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 应用程序的入门模板。配置了 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-template - 具有 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 - 用于创建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 、 Storybook的库模板。

• ReTail - 使用TypeScript 、 Tailwind CSS 、 Prettier和ESLint通过Remix构建全栈 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入门模板，具有Remix基于文件的路由约定，适用于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 、 TailwindCSS 、 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进行引导的模板.

斯韦尔特

• SvelteKit - 构建 Svelte 应用程序的最快方法。

• svelte-vite-ssr - 具有 SSR 支持的 Svelte。

• template-vite-svelte-ts-tailwind -Svelte + TypeScript + Tailwind CSS + Prettier。

• vite-svelte-flow-template -Svelte Flow 入门模板.

• vite-svelte-docker-template Docker + Svelte + Vitest 。

坚硬的

• vitesse-solid - 自以为是的 Vite + SolidJS 入门模板。包括 TypeScript、ESLint、Prettier、UnoCSS、HopeUI 等。

• vitesse-lite-solid -SolidJS 的轻量级 Vite 入门模板.

电子

• electro-vite-vue -Electron + Vite + Vue 模板。

• electro-vite-react -Electron + Vite + React 模板。

• electro-vite-boilerplate - 支持 SerialPort、SQLite3 和 Node C/C++ 插件。

• electro-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。

• electro-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 主进程。

中性子

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

榆树

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

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

娇小视觉

范JS

GitHub

• github-action-template - GitHub Actions、Typescript、ESLint、Vitest、Husky、常规提交的入门模板.

其他的

• vit-singlefile-gzip - 嵌入式入门模板。

• 11st-Starter-Kit - 11ty，由带有 Tailwind CSS 和 Alpine.js 的 Vite 提供支持。

• chrome-ext-template-preact-windi-vite -Preact、Windi CSS、TypeScript、Prettier、ESLint、GitHub Actions 和 Chrome 扩展清单 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 - 将 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 - 下载并注入 webfonts（Google Fonts）以提高网站的性能。

• vite-plugin-babel - 用于构建和服务器的 Babel 集成以支持 f.ex.纯 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 - 使用导入映射和 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 spritemap。

• 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 - 故事书生成器。

• @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 支持旧版浏览器。

• vite-plugin-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 单位的插件。

• vite-multiple-assets - 添加对多个公共资产目录的支持。

• vite-create-production-server-plugin - 构建后启动生产 HTTP 服务。

• vite-plugin-eslint2 - 同步/异步运行 ESLint。

• genaicode/vite-plugin - 将 AI 编码助手嵌入到应用程序 UI 中的插件。

装载机

• 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-ritic - 生成关键 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 - 构建捆绑包后复制文件。

• 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 - 使用过滤器功能支持压缩您的分区。

• vite-plugin-singlefile - 将所有 JavaScript 和 CSS 资源直接内联到最终的dist/index.html文件中。

• vite-plugin-node-polyfills - 用于浏览器环境的 Polyfill 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 混淆器。

• @yuanjianming/unplugin-image-convert - 基于 Sharp.js 的图像多格式转换插件。

• vite-plugin-dynamic-chunk - 拆分条目和动态条目之间的依赖关系，并合并小块。

• @yuanjianming/unplugin-compress-svga - 压缩 SVGA。

• @yuanjianming/unplugin-font-spider - 一个 webfont 压缩插件。

• vite-plugin-static-filehash - 可以帮助程序提高缓存命中率。

变形金刚

• 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 - 将全局变量IconifyProviders注入到iconify的index.html中，并支持局域网和自定义 url。

• vite-plugin-icons-spritesheet - 通过监听图标文件夹的更改，从 SVG 图标生成 spritesheet 和 TypeScript 类型。

• vite-plugin-abbrlink - 将 abbrlink 属性添加到指定目录中的markdown文件中。

• 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-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 - 解析所有资源文件动态 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 路由服务的路由映射。

• 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 - 定义常量以重用代码。

• 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 路由服务的路由映射。

• 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执行时间。

• vite-preload - 预加载由服务器使用 103 早期提示、链接标头或链接标记呈现的延迟加载模块和样式表。

• vite-plugin-envtype-patch - 生成import.meta.env的type信息。

测试

• vitest - Vite 原生测试框架。

• vitest-mock-extended - Vitest 的类型安全模拟扩展.

• cypress-vite - 使用 Vite 运行 Cypress 规范.

• vite-plugin-doctest - Vitest 的文档测试。

• @poyro/vitest - 使用 Vitest 测试 LLM 集成。

安全

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

---

维埃

在本节中，我们使用徽章来指示每个插件的目标 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。

装载机

• vite-plugin-md-markdown作为markdown中的vue组件 / vue组件。

• vite-svg-loader-加载SVG文件作为VUE组件。

• vite-plugin-vue2-svg-作为VUE组件加载SVG文件。

• unplugin-svg-component-加载SVG文件作为VUE组件，支持SVG文件HMR和Typescript Intelligence提示。

• Vite-Plugin-Markdown-Meraid-加载Markdown文件，并带有美人鱼渲染支持。

• vite-plugin式vw-loader-将内联样式的PX转换为大众。

SSG

• Vite-SSG-服务器端生成。

生态系统

• unplugin-vue-i18n- vue i18n的集成。

• Vite-Plugin-I18N-Resources-加载I18N翻译消息文件。

• vite-plugin-i18n-autoimport-auto导入组件的I18N配置文件。

变形金刚

• Vite-Plugin-MD-Preiview-Markdown代码预览。

• vite-plugin-vue-preview-在Markdown中VUE SFC的代码预览，支持在线编辑。

• vite-plugin-vue-css-modules-通过静态替换的模板和脚本SFC标签的CSS模块的隐式用法。

帮手

• unplugin-vue组件 - 按需组件自动象征。

• 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-nest sfc在您的SFC内部。

---

反应

官方的

• @vitejs/plugin -react-使用babel的官方反应支持。

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

预设

路由

• 生成 - 客户端类型安全的基于文件的路由和全局模式 - 支持布局，加载程序，代码拆分等等。

• unplugin-remix-router-生成一个React路由器文件，该文件取决于基于Remix V2文件的路由器约定。

• vite-plugin-remix-flat-routes-基于二型路由路线的混音 - 弗拉特路由路由，与react-rout-router data-api路由兼容。

装载机

• Vite-Plugin-SVGR-将SVG转换为反应组件。

• Vite-Plugin-ReAct-svg-无缝的SVG加载程序，带有多功能导入选项；例如DataUri，SVGR组件和RAW HTML代码。

变形金刚

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

框架

• Vite-Plugin-reactpages-构建React应用程序的Vite框架。

帮手

• vite-plugin-react-click to-component-使用Vite的启动中间件启用Alt+Click键入组件。

SSG

• Vite-react-SSG-反应的静态位点产生。

SSR框架在SSR框架上列出。

---

预反应

预设

• @preact/preset -vite-预设。 HMR，自动预先注射，删除产品中的DevTools。

---

斯韦尔特

集成

• Vite-Plugin-Svelte-添加了Svelte支持。 Svelte团队的官方插件。

帮手

• vite-plugin-kit-routes-生成一个带有Sveltekit应用程序的所有路由，参数和操作的文件。

---

坚硬的

集成

• Vite-Plugin-Solid-提供固体的JSX转换。

• vite-plugin-solid-svg-将SVG文件作为solid.js组件导入。

路由

• 生成 - 客户端类型安全的基于文件的路由和全局模式 - 支持布局，加载程序，代码拆分等等。

---

榆树

集成

• Vite-Plugin-Elm-一个插件，使您可以编译ELM模块。

---

角

集成

---

快速化

集成

• vite-plugin-fastify-用热模块更换的Vite fastify插件。

路由

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

---

电子

集成

• 电子-Vite-与Vite集成的电子CLI。

预设

---

滚动插件

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

包括在Vite中

• @lollup/plugin -alias-定义和解决捆绑依赖的别名。

• @lollup/plugin -commonjs-将commonjs模块转换为ES6。

• @lollup/plugin-dynamic-import-vars-解决包含变量的动态导入。

• @lollup/plugin -json-将.json文件转换为ES6模块。

被默认为Vite

• @lollup/plugin -babel-用babel编译文件。

• @lollup/插件插入 - 用buble编译ES2015。

• @lollup/plugin-data-uri-从数据URI导入模块。

• @lollup/plugin -html-创建HTML文件以服务汇总束。

• @lollup/plugin节点 - 溶解 - 在node_modules中找到和捆绑第三方依赖关系。

• @rollup/插件 - 核酸酶 - 编译打字稿，流量，JSX等，使用Sucrase。

• @lollup/plugin -typescript-汇总和打字稿之间的集成。

• @lollup/插件 - 插件 - 带有汇总的导入WebAssembly代码。

• @lollup/plugin-url-将文件导入为data-uris或es模块。

与Vite兼容

• @lollup/plugin -beep-错误和警告系统哔哔声。

• @lollup/plugin-dsv-使用D3- .tsv .csv为JavaScript模块。

• @lollup/plugin -eslint-验证带有ESLINT的所有导入文件。

• @lollup/plugin -graphql-将.gql/.graphql文件转换为ES6模块。

• @lollup/plugin -image-导入JPG，PNG，GIF，SVG和WebP文件（需要enforce: 'pre' ）。

• @lollup/插件 - 扫描模块在必要时对全局变量和注入导入语句。

• @lollup/plugin-legacy-将导出声明添加到旧版非模块脚本中。

• @lollup/plugin -replace-捆绑时替换文件中的字符串。

• @lollup/插件 - 斯特里 - 从代码中删除调试器语句和功能。

• @lollup/plugin -virtual-汇总插件，该插件从内存中加载虚拟模块。

• @lollup/plugin -yaml-将YAML文件转换为ES6模块。

• rollup-plugin-graphql-codegen- worker_threads中的GraphQL标签模板字符串的生成类型定义。

• lolup-plugin-i18next-dts-gen-从i18n JSON文件中生成类型定义用于代码提示和验证。

社区

• 检查很棒的汇总列表中以获取社区维护的汇总插件，并请参阅有关Rollup插件兼容性的VITE文档部分。

固态继电器

图书馆

• Vike-喜欢Nuxt/next.js，但作为一个do-whith-whell插件。

• SSR-服务器端渲染框架与WebPack/vite结合使用。

• Vavite-一种用于开发和构建具有实时重新加载功能的服务器端应用程序的工具。

• VUE -SSR-简约的包装器开发和运行SSR Power的VUE应用程序。

• vite-ssr-boost-服务器端渲染库，以基于react-router创建Awesome应用程序。

• SSRX- Vite顶部的薄层，以构建具有令人愉悦的DX的现代SSR应用程序。

• Vinxi-完整的堆栈JavaScript SDK。允许将SSR添加到Vite应用中。

• DOMCO-最小的全栈JavaScript。将Vite应用程序变成具有最小依赖性的全堆栈应用程序。

框架

• Rakkas-受到Next.js和Sveltekit启发的React框架。

• VISE-带服务器钩的SSR框架。

• @fastify/fastify -dx-允许您服务静态或实时（SSR）。

• Vite-Plugin-vercel- Vercel适配器。

• vite-vlugin-vercel-skew Protection-有助于配置Vercel偏斜保护。

与后端的集成

Adobe 体验经理

工艺CMS

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

姜戈

• Django -Vite-用于Django应用的集成。

• Django-vite-Plugin-用于包括Vite插件在内的Django应用程序的集成。

烧瓶

• 烧瓶 - 与烧瓶的整合。

红宝石 on Rails

• vite-plugin-ruby-红宝石后端的配置。

• Vite Ruby-用于轨道，哈纳米，帕德里诺和机架应用程序的集成。

拉维尔

• Laravel Vite- Laravel框架的集成。

• Laravel Vite插件 - laravel官方插件。

蛋糕

• cakephp-vite - CakePHP 的集成.

WordPress

• WordPress-Vite-Assets- WordPress主题集成。

• Kima-带有树枝的首发主题。

• Wordplate-作曲家的入门应用程序。

TYPO3 CMS

• vite-plugin-typo3- typo3 cms的前端集成。

• 用于Typo3的Vite-Asset-Collector- typo3 cms的后端集成。

去

• VITE-与GO集成。

锈

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

十月CMS

交响乐团

• Vite Bundle-符号集成。

购物

• Vite-Plugin-Shopify-用于Shopify主题的集成。

代码点火器

DDEV

Node.js

• vite -express- Express Web应用程序的集成。

• vite-manifest-parser-parses subtest.json生成html脚本和链接标签。

ASP.NET 核心

• vite.aspnetcore-与ASP.NET核心项目集成。

德鲁帕尔

• Vite模块 - Drupal的后端集成。

• vite-plugin-twig-drupal-对树枝的支持，包括/嵌入/嵌入和drupal特定的树枝特征。

PHP

• PHP -VITE- PHP的集成，作曲家软件包，无框架依赖性。

• php -vite启动器存储库 - 启动存储库，带有打字稿/JavaScript，tailwind CSS，SASS/SCSS，EJS，SVG和图像支持。

• PHP -Vitelinker-构建捆绑包后生成可包含的PHP文件的CLI工具。

迁移

Vue CLI

反应

• viject-创建React App中的一击迁移工具。

使用vite.js的项目

开源

• VitePress-由Vite和Vue提供动力的静态站点发生器。

• SLIDEV-开发人员的演示幻灯片。

• Astro-现代静态站点构建器。

• Hathora-多人游戏框架。

• NHOST -NHOST是带有GraphQl的开源Firebase替代方案。

• Ladle-用于开发和测试由VITE和REACT提供支持的组件故事的工具。

• Islandjs-岛建筑的静态现场生成器基地。

• Vituum-包装围绕Vite的包装，具有预定义的配置，集成和模板引擎。

• compiiile-带有全文搜索和演示幻灯片的标记文件的预览或主机文件夹。

• Gracile-由LIT SSR提供动力的元框架。

• @lazarv/react-server-a react meta-framework。

• WXT-构建Web扩展的框架，具有与NUXT相同的DX。

• Revili-命令和GUI集成工具。

应用程序/网站

• Icônes-ICON Explorer即可进行即时搜索。

• 很棒的CNCafé-令人敬畏的CNCafé的Web应用程序。

• 示例 - 带路由和状态管理的待办事项。

• AITRACK.WORK-一种基于任务的时间跟踪器，用于日常使用。

• MacOS在Svelte中 - MacOS桌面体验Sivete的Web体验。

• VUE3-RealWorld-example-App-使用VUE 3 + Typescript + Coption API实现Realworld应用程序。

• React Device-Frameset-这是另一个用于React的设备框架组件。

• preview.js-立即预览React，VUE 2和VUE 3组件的IDE扩展。

• Pointer-Lock运动 - 用于自定义您自己的Creative UI的指针锁定运动经理。

• VITE -RUN-多种配置执行支持Vite，自由组合堆叠块等配置。

• Dataviz Explorer-使用Highcharts ， Chart.js ， React ， JavaScript ， Material UI和GitHub Actions with Coverage Report交互式图，用于大型CSV，数据库和实时可视化的工具。