vite

Vite

基於 Vite 8 beta（Rolldown 驅動）。Vite 8 使用 Rolldown 打包器與 Oxc 轉換器。

Vite 是次世代前端建置工具，具備快速開發伺服器（原生 ESM + HMR）與最佳化生產建置。

偏好設定

• 使用 TypeScript：偏好 vite.config.ts
• 一律使用 ESM，避免 CommonJS

核心

主題	說明	參考
設定	vite.config.ts、defineConfig、條件設定、loadEnv	core-config
功能	import.meta.glob、資源查詢（?raw、?url）、import.meta.env、HMR API	core-features
外掛 API	Vite 專用鉤子、虛擬模組、外掛排序	core-plugin-api

建置與 SSR

主題	說明	參考
建置與 SSR	函式庫模式、SSR 中介軟體模式、ssrLoadModule、JavaScript API	build-and-ssr

進階

主題	說明	參考
環境 API	Vite 6+ 多環境支援、自訂執行環境	environment-api
Rolldown 遷移	Vite 8 變更：Rolldown 打包器、Oxc 轉換器、設定遷移	rolldown-migration

快速參考

CLI 指令

vite              # 啟動開發伺服器
vite build        # 生產建置
vite preview      # 預覽生產建置
vite build --ssr  # SSR 建置

常用設定

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  resolve: { alias: { '@': '/src' } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { target: 'esnext', outDir: 'dist' },
})

官方外掛

• @vitejs/plugin-vue - Vue 3 SFC 支援
• @vitejs/plugin-vue-jsx - Vue 3 JSX
• @vitejs/plugin-react - React 搭配 Oxc/Babel
• @vitejs/plugin-react-swc - React 搭配 SWC
• @vitejs/plugin-legacy - 舊版瀏覽器支援