跳轉至

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

設定檔 vite.config

npm create vite@latest 建立的專案，根目錄都會有一個 vite.config.js（或 TypeScript 版本 vite.config.ts）。沒有這個檔案，Vite 也能用預設值運作；一旦需要客製化路徑、代理、外掛等行為，就會用到它。

基本結構

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

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

defineConfig 是官方提供的輔助函式，主要作用是讓編輯器能正確推斷設定物件的型別、提供自動完成，本身不是必要的，但建議使用。

常用設定項目

以下是實務上最常調整的選項：

import { defineConfig } from 'vite'
import path from 'node:path'

export default defineConfig({
  base: '/my-app/',              // 部署後的根路徑，子路徑部署時必填
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),   // import 路徑別名，例如 import Foo from '@/components/Foo'
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',        // 開發時代理後端請求，避免 CORS 問題
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
})
選項 作用
base 靜態資源與路由的基礎路徑；部署到網域子路徑（例如 GitHub Pages）時必須設定，否則資源會找不到。
resolve.alias 設定 import 路徑別名，避免專案變大後出現大量 ../../../ 相對路徑。
server 開發伺服器行為，詳見〈開發伺服器與 HMR〉。
build 打包行為，詳見〈打包與預覽〉。
plugins 註冊外掛，詳見〈外掛系統〉。

依模式或指令切換設定

若不同環境需要不同設定，defineConfig 可以接受一個函式，依 command（serve 或 build）與 mode 回傳不同設定：

export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    return {
      // 開發專用設定
    }
  }
  return {
    // build 專用設定，mode 可用於判斷 production / staging 等
  }
})

這個模式常用於：開發時需要 proxy，但正式打包不需要；或不同 --mode 對應不同的 base 路徑。

相關資料