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 - 輕鬆使用網路框架開發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 作為 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 設定檔。

變形金剛

• vite-plugin-md-preview - Markdown 程式碼預覽。

• vite-plugin-vue-preview -Markdown 中 Vue SFC 的程式碼預覽，支援線上編輯。

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

---

反應

官方的

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

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

預設

路由

• generouted - 用戶端類型安全的基於檔案的路由和全域模式 - 支援佈局、載入器、程式碼分割等。

• unplugin-remix-router - 產生一個 React Router 文件，該文件取決於 Remix v2 基於文件的路由器約定。

• vite-plugin-remix-flat-routes -Remix-flat-routes 基於約定的路由，與react-router data-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+click 前往元件。

SSG

• vite-react-ssg - React 的靜態網站產生。

SSR 框架在 SSR - 框架中列出。

---

預反應

預設

• @preact/preset-vite - Preact 預設。 HMR、自動 Preact 注入、刪除產品中的 DevTools。

---

斯韋爾特

整合

• vite-plugin-svelte - 新增 Svelte 支援。 Svelte 團隊的官方插件。

幫手

• vite-plugin-kit-routes - 產生一個包含 SvelteKit 應用程式的所有路由、參數、操作的檔案。

---

堅硬的

整合

• vite-plugin-solid - 為 Solid 提供 JSX 轉換。

• vite-plugin-solid-svg - 將 SVG 檔案匯入為 Solid.js 元件。

路由

• generouted - 用戶端類型安全的基於檔案的路由和全域模式 - 支援佈局、載入器、程式碼分割等。

---

榆樹

整合

• vite-plugin-elm - 一個使您能夠編譯 Elm 模組的插件。

---

角

整合

---

快速化

整合

• vite-plugin-fastify -Vite 的 Fastify 插件，具有熱模組替換功能.

路由

• vite-plugin-fastify-routes - 基於檔案的路由，類似 SvelteKit 和 Next.js App Router。

---

電子

整合

• electro-vite - 與 Vite 整合的 Electron CLI.

預設

---

匯總插件

• Vite Rollup Plugins - 官方 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 - 從資料 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 - 將檔案匯入為 data-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 插件相容性的部分。

固態繼電器

圖書館

• 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應用程式。

• 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 - 用於與 Craft CMS 整合的插件。

薑戈

• django-vite - Django 應用程式的整合。

• django-vite-plugin - Django 應用程式的集成，包括 vite 插件。

燒瓶

• Flask-Vite - 與 Flask 整合。

紅寶石 on Rails

• vite-plugin-ruby - Ruby 後端的配置。

• Vite Ruby - Rails、Hanami、Padrino 和 Rack 應用程式的整合。

拉維爾

• Laravel Vite - Laravel 框架的整合。

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

蛋糕PHP

• 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 的後端整合.

去

• vite - 與 Go 整合。

鏽

• create-rust-app - Rust Web 應用程式的整合。

十月CMS

交響樂團

• Vite Bundle - Symfony 整合。

購物

• vite-plugin-shopify - Shopify 主題整合。

代碼點火器

DDEV

Node.js

• vite-express - Express Web 應用程式的整合。

• vite-manifest-parser - 解析manifest.json以產生HTML腳本和連結標籤。

ASP.NET 核心

• Vite.AspNetCore - 與 ASP.NET Core 專案整合。

德魯帕爾

• 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 - 一個 CLI 工具，可在建置捆綁包後產生可包含的 PHP 檔案。

遷移

Vue CLI

反應

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

使用 Vite.js 的項目

開源

• VitePress - 由 Vite 和 Vue 提供支援的靜態網站產生器。

• Slidev - 為開發人員提供的簡報投影片。

• Astro - 現代靜態站點產生器。

• Hatora - 多人遊戲框架。

• Nhost -Nhost 是 GraphQL 的開源 Firebase 替代方案.

• Ladle - 用於開發和測試由 Vite 和 React 支援的元件故事的工具。

• IslandJS - 以島嶼架構為基礎的靜態站點產生器。

• Vituum - 使用預先定義的配置、整合和模板引擎圍繞 Vite 進行包裝。

• Compiile - 預覽或託管包含帶有全文搜尋和簡報投影片的 Markdown 檔案的資料夾。

• Gracile - 由 Lit SSR 提供​​支援的元框架。

• @lazarv/react-server - React 元框架。

• WXT - 用於建立 Web 擴充功能的框架，與 Nuxt 具有相同的 DX。

• Revili - 指令和 GUI 整合工具。

應用程式/網站

• Icones - 具有即時搜尋功能的圖示瀏覽器。

• Awesome CN Café - Awesome CN Café 的 Web 應用程式.

• Todo 範例 - 具有路由和狀態管理的 Todo 應用程式。

• aitrack.work - 適合日常使用的基於任務的時間追蹤器。

• macOS in Svelte - Svelte 中 Web 的 macOS 桌面體驗.

• 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 - 大型 CSV、資料庫和即時視覺化的工具，使用Highcharts 、 Chart.js 、 React 、 JavaScript 、 Material UI和GitHub Actions with Coverage Report進行互動式繪圖。