在開發專案時，我們經常需要使用一些機密資訊，例如資料庫密碼、API 金鑰。直接把這些資訊寫在程式碼裡，或上傳到 GitHub 是非常危險的。今天，我們要來學習如何使用 .env 檔案來安全地管理這些秘密。

1. 什麼是 `.env`？— 你的本地密碼本

.env 檔案就像是您放在自己電腦上的一本密碼本。您把所有機密資訊以 KEY=VALUE 的格式寫在裡面，Nuxt 在開發和建置時會自動去讀取它。

.env (請在專案根目錄建立這個檔案)

# .env

DATABASE_PASSWORD="my-super-secret-password"
API_KEY="1234567890"

黃金定律

.env 檔案絕對不能上傳到 Git。Nuxt 在建立專案時，就已經很貼心地在 .gitignore 檔案中幫我們排除了它，請務必確認。

2. 一個極其重要的觀念：`.env` 只在本地有效

這是一個新手最容易混淆的觀念：

.env 檔案只在您的電腦上進行開發和建置時有效。當您將網站部署到 Vercel 或 Netlify 這樣的生產環境時，它們不會去讀取您的 .env 檔案。

為什麼？

這是為了讓 Nuxt 能部署在任何地方，包括一些沒有檔案系統的現代化平台（例如邊緣運算環境）。

那在生產環境怎麼辦？

您必須透過託管平台提供的介面（例如 Vercel 的 Environment Variables 設定頁面）來設定這些秘密。

3. 使用秘密的正確姿勢：搭配 `runtimeConfig`

我們有了 .env，但要如何在我們的程式碼中安全地使用這些秘密呢？

正確的作法是，透過 nuxt.config.ts 的 runtimeConfig，將 .env 裡的變數「暴露」給應用程式。這樣做可以讓我們集中管理哪些變數是可用的。

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // 這裡的變數只會在「伺服器端」可用，不會洩漏到前端
    apiKey: process.env.API_KEY,
    dbPassword: process.env.DATABASE_PASSWORD,

    // public 區塊的變數在「前端和後端」都可用
    public: {
      // ...
    }
  }
})

接著，您就可以在伺服器路由中，透過 useRuntimeConfig() 來安全地取用這些秘密了。

server/api/example.ts

// server/api/example.ts
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig();
  
  // 安全地使用機密資訊
  const apiKey = config.apiKey;
  const dbPassword = config.dbPassword;
  
  // 執行需要機密資訊的操作...
});

今日總結

今天我們學會了如何正確管理機密資訊：

.env 是存放本地開發用的機密資訊的地方。

它必須被 .gitignore 排除，絕不上傳。

它在生產環境中無效，您必須在託管平台上另外設定。

在 Nuxt 專案中，使用這些秘密的最佳實踐是透過 runtimeConfig。

專業提醒

學會正確地管理環境變數和機密資訊，是從入門邁向專業開發者的關鍵一步！