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	Library mode、SSR middleware mode、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 - 舊版瀏覽器支援