跳轉至

建立 2026-09-16 更新 2026-09-16

框架整合

Vite 本身框架無關（framework-agnostic），實際開發時通常會搭配一個前端框架。本頁以最主流的 React 與 Vue 為例，說明專案建立方式與各自的框架外掛，其餘框架（Svelte、Solid、Preact、Lit 等）流程大同小異，差別主要在框架專屬外掛與檔案格式。

React ＋ Vite

建立專案：

npm create vite@latest my-react-app -- --template react-ts

React 範本會自動加入 @vitejs/plugin-react，這個外掛負責兩件事：

  • 轉譯 JSX／TSX 語法。
  • 實作 Fast Refresh（React 版本的 HMR），讓元件修改後能保留 useState 等狀態，不需要整頁重新整理。

vite.config.ts 只需要註冊外掛：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

官方社群也維護 @vitejs/plugin-react-swc，以 Rust 撰寫的 SWC 取代 Babel 做轉譯，大型專案編譯速度更快，可視需求替換。

Vue ＋ Vite

建立專案（Vue 官方腳手架 create-vue 底層也是用 Vite）：

npm create vue@latest

或使用 Vite 官方範本：

npm create vite@latest my-vue-app -- --template vue-ts

Vue 範本使用 @vitejs/plugin-vue，負責編譯 .vue 單檔元件（Single-File Component），把 <template>、<script>、<style> 分別轉換成瀏覽器可執行的程式碼：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

Vue CLI（基於 Webpack）目前已進入維護模式，官方建議新專案一律改用 Vite 作為建置工具。

選擇框架外掛的原則

不論搭配哪個框架，原則是一致的：

  1. 用官方腳手架（npm create vite@latest 或框架自己的 create-* 指令）建立專案，會自動裝好對應的框架外掛與正確設定，不需要手動兜。
  2. 框架外掛負責「讓 Vite 看懂框架語法＋提供精準 HMR」，一般專案不需要額外調整。
  3. 若要換轉譯引擎（如 React 的 SWC 版本），通常只需要替換外掛套件，設定寫法不變。

推薦影音

用 Vite 建立第一個 React + TypeScript 專案

簡述：示範從建立專案、認識目錄結構到啟動開發伺服器的完整流程，說明 Vite 作為 Create React App 替代方案的優勢，適合第一次用 Vite 搭配 React 開發的讀者。

用 Vite 建立 Vue 3 專案

簡述：說明如何用 Vite 建立 Vue 3 專案，並介紹單檔元件（.vue）的基本結構與開發流程，適合已熟悉 Vue 基礎、想改用 Vite 開發的讀者。

相關資料