測驗：Vite 設定檔與環境變數

共 5 題，點選答案後會立即顯示結果

1. 在 Vite 設定檔中，`defineConfig` 函式的主要功能是什麼？

A. 啟動開發伺服器
B. 提供 TypeScript 類型提示
C. 打包專案程式碼
D. 載入環境變數

2. 關於 Vite 的環境變數命名規則，以下何者正確？

A. 所有環境變數都會自動暴露給前端程式碼
B. 只有以 ENV_ 開頭的變數會暴露給前端
C. 只有以 VITE_ 開頭的變數會暴露給前端
D. 必須在 vite.config.ts 中手動宣告才會暴露

3. 設定 `resolve.alias` 的主要目的是什麼？

resolve: {
  alias: {
    ‘@’: path.resolve(__dirname, ‘./src’),
  },
},

A. 設定打包輸出的檔案名稱
B. 簡化 import 路徑，避免使用複雜的相對路徑
C. 指定哪些檔案需要被打包
D. 設定開發伺服器的根目錄

4. 在程式碼中讀取環境變數時，應該使用哪個物件？

A. process.env
B. window.env
C. global.env
D. import.meta.env

5. 關於 `server.proxy` 設定，以下敘述何者正確？

server: {
  proxy: {
    ‘/api’: {
      target: ‘http://localhost:8080’,
      changeOrigin: true,
    },
  },
},

A. 此設定會影響 npm run build 的產出
B. 此設定可以解決開發時的跨域問題
C. 此設定會將所有請求都轉發到目標伺服器
D. 此設定需要後端伺服器配合修改

前言

在前兩篇文章中，我們學會了建立 Vite 專案和理解基本的專案結構。現在要進入更實務的層面：當你接手一個 Vite 專案，或是需要調整專案設定時，該如何讀懂那些設定檔？

本篇將帶你認識 vite.config.ts 設定檔的結構，以及如何管理不同環境的變數。這些知識在實務開發中非常重要，因為幾乎每個專案都會有自己的設定需求。

讀懂 vite.config.ts 設定檔

基本結構

打開任何一個 Vite 專案，你都會看到類似這樣的設定檔：

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

export default defineConfig({
  plugins: [react()],
})
Code language: JavaScript (javascript)

讓我們逐行解讀：

import { defineConfig } from 'vite'：這是 Vite 提供的輔助函式，它的功能是提供 TypeScript 類型提示。沒有它程式也能跑，但有了它，編輯器會告訴你有哪些設定項可用。
import react from '@vitejs/plugin-react'：這是 React 的官方 Vite 插件，負責處理 JSX 轉換和 React 特有的功能。
export default defineConfig({...})：匯出設定物件。這裡的設定會影響開發伺服器和打包行為。

常見設定項一覽

當你看到一份完整的設定檔，可能會像這樣：

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

export default defineConfig({
  // 插件設定
  plugins: [react()],

  // 路徑解析設定
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },

  // 開發伺服器設定
  server: {
    port: 3000,
    open: true,
  },

  // 打包設定
  build: {
    outDir: 'dist',
  },
})
Code language: JavaScript (javascript)

以下分別說明每個區塊的用途。

plugins：插件設定

plugins: [react()],
Code language: CSS (css)

這個陣列放的是 Vite 插件。插件可以擴展 Vite 的功能，例如：

@vitejs/plugin-react：支援 React
@vitejs/plugin-vue：支援 Vue
vite-plugin-svgr：將 SVG 轉為 React 元件

當你看到 plugins 陣列裡有多個項目，代表專案使用了這些額外功能。

resolve.alias：路徑別名

resolve: {
  alias: {
    '@': path.resolve(__dirname, './src'),
  },
},
Code language: CSS (css)

這是讓 import 路徑更簡潔的設定。設定後，原本這樣的路徑：

// 沒有別名時
import Button from '../../../components/Button'
Code language: JavaScript (javascript)

可以簡化為：

// 有別名後
import Button from '@/components/Button'
Code language: JavaScript (javascript)

@ 會被解析為 src 目錄的絕對路徑，不管你的檔案在哪個深度，都可以用 @/ 開頭來 import。

注意：如果專案使用 TypeScript，還需要在 tsconfig.json 加入對應設定：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
Code language: JSON / JSON with Comments (json)

server：開發伺服器設定

server: {
  port: 3000,        // 伺服器埠號
  open: true,        // 啟動時自動開啟瀏覽器
  host: true,        // 監聽所有網路介面（讓手機可以連）
  proxy: {           // API 代理設定
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
  },
},
Code language: JavaScript (javascript)

這些設定只影響開發環境（npm run dev），不會影響最終打包結果。

proxy 設定在前後端分離開發時特別有用。當前端發送 /api/users 請求時，會被代理到 http://localhost:8080/api/users，避免跨域問題。

build：打包設定

build: {
  outDir: 'dist',           // 輸出目錄
  sourcemap: true,          // 是否產生 source map
  minify: 'terser',         // 壓縮工具
  rollupOptions: {          // Rollup 進階設定
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
      },
    },
  },
},
Code language: JavaScript (javascript)

這些設定影響 npm run build 的產出。rollupOptions 可以做更細緻的打包控制，例如將 React 相關套件獨立打包成 vendor.js。

環境變數的管理

.env 檔案家族

Vite 使用 .env 檔案來管理環境變數。在專案根目錄，你可能會看到這些檔案：

專案目錄/
├── .env                 # 所有環境都會載入
├── .env.local           # 所有環境都會載入，但會被 git 忽略
├── .env.development     # 只在開發環境載入
├── .env.production      # 只在生產環境載入
└── .env.development.local  # 開發環境載入，被 git 忽略
Code language: PHP (php)

載入優先順序（後面會覆蓋前面）：

.env
.env.local
.env.[mode]（如 .env.development）
.env.[mode].local

環境變數的命名規則

重要：只有以 VITE_ 開頭的變數才會暴露給前端程式碼。

# .env
VITE_API_URL=https://api.example.com    # 前端可以讀取
VITE_APP_TITLE=我的應用程式               # 前端可以讀取
DATABASE_PASSWORD=secret123              # 前端讀不到（安全考量）
Code language: PHP (php)

這是 Vite 的安全機制，避免敏感資訊意外被打包進前端程式。

在程式碼中使用環境變數

使用 import.meta.env 來存取環境變數：

// 讀取自訂的環境變數
const apiUrl = import.meta.env.VITE_API_URL

// Vite 內建的環境變數
console.log(import.meta.env.MODE)        // 'development' 或 'production'
console.log(import.meta.env.DEV)         // true（開發模式時）
console.log(import.meta.env.PROD)        // true（生產模式時）
console.log(import.meta.env.BASE_URL)    // 部署的 base URL
Code language: JavaScript (javascript)

實務範例：

// src/api/client.ts
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080'

export async function fetchUsers() {
  const response = await fetch(`${API_BASE_URL}/api/users`)
  return response.json()
}
Code language: JavaScript (javascript)

TypeScript 類型提示

如果專案使用 TypeScript，可以在 src/vite-env.d.ts 加入類型定義：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_APP_TITLE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}
Code language: PHP (php)

這樣在使用 import.meta.env.VITE_API_URL 時，編輯器就會有自動補全。

實務情境：讀懂一份完整設定

假設你接手一個專案，看到這份設定檔：

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

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [react()],

    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@components': path.resolve(__dirname, './src/components'),
        '@hooks': path.resolve(__dirname, './src/hooks'),
      },
    },

    server: {
      port: 3000,
      proxy: {
        '/api': {
          target: env.API_SERVER || 'http://localhost:8080',
          changeOrigin: true,
        },
      },
    },

    build: {
      sourcemap: mode !== 'production',
    },
  }
})
Code language: JavaScript (javascript)

你可以這樣解讀：

函式形式的設定：defineConfig(({ mode }) => {...}) 可以接收 mode 參數（’development’ 或 ‘production’），讓設定根據環境動態調整。
loadEnv：這是 Vite 提供的函式，可以在設定檔中讀取 .env 的變數。
多個路徑別名：@、@components、@hooks 分別對應不同目錄。
動態 proxy target：API 代理目標會優先使用環境變數 API_SERVER，找不到才用預設值。
條件式 sourcemap：只在非 production 環境產生 source map。

常見問題

為什麼環境變數讀取是 undefined？

檢查清單：

變數名稱是否以 VITE_ 開頭？
修改 .env 後是否重啟開發伺服器？
檔案名稱是否正確（.env 不是 env）？

路徑別名在編輯器沒有提示？

確認 tsconfig.json 有對應的 paths 設定，並且 baseUrl 設為 "."。

proxy 設定沒有生效？

確認目標伺服器有在運行
檢查 target 網址是否正確
確認前端呼叫的路徑符合 proxy 的 pattern

本篇重點

vite.config.ts 是 Vite 的核心設定檔，使用 defineConfig 取得類型提示
plugins 陣列放置 Vite 插件，擴展專案功能
resolve.alias 設定路徑別名，簡化 import 路徑
server 設定開發伺服器，包含 port、proxy 等
build 設定打包行為，影響最終產出
環境變數使用 .env 檔案管理，只有 VITE_ 開頭的變數會暴露給前端
使用 import.meta.env 在程式碼中讀取環境變數

下一篇預告

下一篇將介紹打包與部署的完整流程，包含如何理解打包產出的檔案結構，以及部署到不同平台的設定方式。

進階測驗：Vite 設定檔與環境變數

測驗目標：驗證你是否能在實際情境中應用所學。
共 5 題，包含情境題與錯誤診斷題。

1. 你正在開發一個前後端分離的專案，前端跑在 port 3000，後端 API 在 port 8080。前端發送 `/api/users` 請求時出現 CORS 錯誤。該如何在 Vite 設定中解決？情境題

A. 在 build 區塊加入 CORS 設定
B. 修改 .env 檔案設定 VITE_CORS=true
C. 在 server.proxy 設定將 /api 代理到 http://localhost:8080
D. 在 plugins 陣列加入 CORS 插件

2. 小明在專案中設定了環境變數，但在程式碼中讀取時總是 `undefined`。以下是他的 `.env` 檔案內容：錯誤診斷

# .env
API_URL=https://api.example.com
APP_TITLE=我的應用程式

最可能的原因是什麼？

A. .env 檔案位置不對，應該放在 src 目錄
B. 變數名稱沒有以 VITE_ 開頭
C. 需要在 vite.config.ts 中匯入這些變數
D. 使用了中文字元導致解析失敗

3. 你接手一個專案，看到以下設定。該專案有哪些特性？情境題

export default defineConfig(({ mode }) => {
  return {
    build: {
      sourcemap: mode !== ‘production’,
    },
  }
})

A. 所有環境都會產生 source map
B. 所有環境都不會產生 source map
C. 只有 production 環境會產生 source map
D. 除了 production 以外的環境會產生 source map

4. 小華設定了路徑別名，但編輯器沒有自動補全提示。以下是他的 `vite.config.ts`：錯誤診斷

resolve: {
  alias: {
    ‘@’: path.resolve(__dirname, ‘./src’),
  },
},

最可能的解決方式是什麼？

A. 重新安裝 Vite 套件
B. 在 .env 檔案中設定 VITE_ALIAS=@
C. 在 tsconfig.json 加入對應的 paths 設定
D. 將 @ 改成 ~ 符號

5. 你需要讓專案在不同環境使用不同的 API 位址。開發時用 `http://localhost:8080`，正式環境用 `https://api.prod.com`。最佳做法是什麼？情境題

A. 在程式碼中用 if 判斷 import.meta.env.MODE 來決定 URL
B. 建立 .env.development 和 .env.production 檔案，分別設定 VITE_API_URL
C. 在 vite.config.ts 中硬編碼兩個環境的 URL
D. 每次部署前手動修改程式碼中的 URL

【Vite 教學】#03 Vite 設定檔與環境變數

測驗：Vite 設定檔與環境變數

1. 在 Vite 設定檔中，`defineConfig` 函式的主要功能是什麼？

2. 關於 Vite 的環境變數命名規則，以下何者正確？

3. 設定 `resolve.alias` 的主要目的是什麼？

4. 在程式碼中讀取環境變數時，應該使用哪個物件？

5. 關於 `server.proxy` 設定，以下敘述何者正確？

前言

讀懂 vite.config.ts 設定檔

基本結構

常見設定項一覽

plugins：插件設定

resolve.alias：路徑別名

server：開發伺服器設定

build：打包設定

環境變數的管理

.env 檔案家族

環境變數的命名規則

在程式碼中使用環境變數

TypeScript 類型提示

實務情境：讀懂一份完整設定

常見問題

為什麼環境變數讀取是 undefined？

路徑別名在編輯器沒有提示？

proxy 設定沒有生效？

本篇重點

下一篇預告

進階測驗：Vite 設定檔與環境變數

1. 你正在開發一個前後端分離的專案，前端跑在 port 3000，後端 API 在 port 8080。前端發送 `/api/users` 請求時出現 CORS 錯誤。該如何在 Vite 設定中解決？情境題

2. 小明在專案中設定了環境變數，但在程式碼中讀取時總是 `undefined`。以下是他的 `.env` 檔案內容：錯誤診斷

3. 你接手一個專案，看到以下設定。該專案有哪些特性？情境題

4. 小華設定了路徑別名，但編輯器沒有自動補全提示。以下是他的 `vite.config.ts`：錯誤診斷

5. 你需要讓專案在不同環境使用不同的 API 位址。開發時用 `http://localhost:8080`，正式環境用 `https://api.prod.com`。最佳做法是什麼？情境題

發佈留言取消回覆

測驗：Vite 設定檔與環境變數

1. 在 Vite 設定檔中，defineConfig 函式的主要功能是什麼？

2. 關於 Vite 的環境變數命名規則，以下何者正確？

3. 設定 resolve.alias 的主要目的是什麼？

4. 在程式碼中讀取環境變數時，應該使用哪個物件？

5. 關於 server.proxy 設定，以下敘述何者正確？

前言

讀懂 vite.config.ts 設定檔

基本結構

常見設定項一覽

plugins：插件設定

resolve.alias：路徑別名

server：開發伺服器設定

build：打包設定

環境變數的管理

.env 檔案家族

環境變數的命名規則

在程式碼中使用環境變數

TypeScript 類型提示

實務情境：讀懂一份完整設定

常見問題

為什麼環境變數讀取是 undefined？

路徑別名在編輯器沒有提示？

proxy 設定沒有生效？

本篇重點

下一篇預告

進階測驗：Vite 設定檔與環境變數

1. 你正在開發一個前後端分離的專案，前端跑在 port 3000，後端 API 在 port 8080。前端發送 /api/users 請求時出現 CORS 錯誤。該如何在 Vite 設定中解決？ 情境題

2. 小明在專案中設定了環境變數，但在程式碼中讀取時總是 undefined。以下是他的 .env 檔案內容： 錯誤診斷

3. 你接手一個專案，看到以下設定。該專案有哪些特性？ 情境題

4. 小華設定了路徑別名，但編輯器沒有自動補全提示。以下是他的 vite.config.ts： 錯誤診斷

5. 你需要讓專案在不同環境使用不同的 API 位址。開發時用 http://localhost:8080，正式環境用 https://api.prod.com。最佳做法是什麼？ 情境題

相關文章

【Vite 教學】#04 Vite 生產環境打包與部署

【Vite 教學】#02 用 Vite 建立 React 專案

【Vite 教學】#01 Vite 是什麼？現代前端構建工具入門

發佈留言取消回覆

1. 在 Vite 設定檔中，`defineConfig` 函式的主要功能是什麼？

3. 設定 `resolve.alias` 的主要目的是什麼？

5. 關於 `server.proxy` 設定，以下敘述何者正確？

1. 你正在開發一個前後端分離的專案，前端跑在 port 3000，後端 API 在 port 8080。前端發送 `/api/users` 請求時出現 CORS 錯誤。該如何在 Vite 設定中解決？情境題

2. 小明在專案中設定了環境變數，但在程式碼中讀取時總是 `undefined`。以下是他的 `.env` 檔案內容：錯誤診斷

3. 你接手一個專案，看到以下設定。該專案有哪些特性？情境題

4. 小華設定了路徑別名，但編輯器沒有自動補全提示。以下是他的 `vite.config.ts`：錯誤診斷

5. 你需要讓專案在不同環境使用不同的 API 位址。開發時用 `http://localhost:8080`，正式環境用 `https://api.prod.com`。最佳做法是什麼？情境題