前言

我們在使用 Node 開發時，可能會碰到需要使用環境變數來設定不同情境所執行的邏輯，也可能是要避免在設定檔中或專案推送至遠端版控倉庫時暴露敏感資訊。

你可能直接使用過 export 來設定環境變數，但環境變數只要一多，執行的指令可能就會變得很長，而且也不好維護。

NODE_ENV=production node -e "console.log(process.env.NODE_ENV)"

更進階的用法是寫成一個檔案，並透過 env 來載入檔案的內容後再執行程式

env $(cat .env) node -e "console.log(process.env.NODE_ENV)"

不過如果我們在檔案內需要註解，可能就會導致環境變數無法正確被解析。

Dotenv

Dotenv 是一個 NPM 的模組，它可以將專案目錄下 .env 的檔案中的環境變數，自動載入至 process.env，對於專案內使用環境變數非常方便，並且配置簡單也不需要其他依賴套件。

不僅可以添加單行註解，也可以在行內添加註解。

# 這裡可以寫註解
SECRET_KEY=YOURSECRETKEYGOESHERE # 行內註解
SECRET_HASH="something-with-a-#-hash" # 如果字串值包含井字號 # 可以用雙引號包起來

多行的數值也能夠支援

PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----
...
Nu3xT...
...
-----END RSA PRIVATE KEY-----"

或者也可以在雙引號描述的字串中使用 \n 字元來表示換行：

PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nNu3xT...\n-----END RSA PRIVATE KEY-----\n"

有了 DotEnv，你可以很方便的控制專案內的環境變數，甚至為多個環境中定義不同的 .env 檔案，使用時再依據環境指定要自動載入的檔案，便可以載入不同的環境變數應付開發或生產環境的要求。

Nuxt 3 .env 檔案的載入

在 Nuxt 3 中導入 DotEnv 來進行環境變數的載入與控制，讓專案可以控制在執行期間或是客戶端期間可以使用相對應的環境變數，如果你的 Nuxt 專案根目錄中存在一個 .env 檔案，它將會在你使用開發伺服器 nuxi dev、編譯建構專案 nuxi build 及產生預渲染檔案 nuxi generate 時自動載入。

甚至在開發伺服器啟動時，你只要修改 .env 檔案內容，Nuxt 的實體會自動重新啟動並載入環境變數，並將新的值載入至 process.env 中。

當執行下列指令啟動開發伺服器時，預設會載入 .env 檔名的檔案作為環境變數使用。

npx nuxi dev 

如果你想使用不同的檔案來載入環境變數，可以添加擴展 .env 的檔案名稱，例如 .env.local 或 .env.production，在使用指令執行開發伺服器時，添加 --dotenv 標誌來指定載入的檔案。

npx nuxi dev --dotenv .env.local

當然在 nuxi 下有支援 --dotenv 的指令都可以用此方式來載入不同的環境變數檔案。

npx nuxi build --dotenv .env.production

Nuxt 3 .env 檔案的環境變數覆蓋 Runtime Config

有些情況你會在 ./nuxt.config.ts 配置 Runtime Config，以便在網站執行時可以使用這些設定，舉例來說，你可以為 API 配置相關的設定。

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '怎麼可以讓你知道呢 :P',
    public: {
      apiBase: '/api'
    },
  },
})

但一些敏感資訊如 Token、金鑰或憑證等，如果直接撰寫於這個設定中，可能依此一併的被推送至遠端版控制倉庫，不僅可能會洩漏敏感資訊，在不同環境的設定檔切換也不是這麼的方便。

Nuxt 3 在 Runtime Config 的配置上支援了 .env 來協助配置，若你的 .env 檔案內有配置相關變數時，在執行的過程中原本配置在 ./nuxt.config.ts 的屬性值，就會自動地被替換為匹配到的環境變數。

.env 的環境變數需要依照特定的格式才能正確的匹配到，命名的方式使用 NUXT_ 及 NUXT_PUBLIC_ 作為開頭，原本小駝峰命名的設定值，則以全大寫英文字母與使用底線 _ 來分隔大小寫來表示。

舉個例子，上述設定的 apiSecret 與 public.apiBase，在 .env 能匹配到的撰寫方式如下：

NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://api.nuxtjs.org

當我們要使用這兩個 Config 時，透過 Nuxt 3 提供的組合式函式 useRuntimeConfig，就能夠取得 Nuxt Config 配置的設定值或透過 .env 自動載入所覆蓋的設定。

私有的設定 apiSecret 可以直接透過 runtimeConfig 來取值；公開的設定 apiBase 因為設定在 public 下，所以使用 runtimeConfig.public 來取得 apiBase 的值。

<script>
const runtimeConfig = useRuntimeConfig()
const { apiSecret } = runtimeConfig
const { apiBase } = runtimeConfig.public
</script>

小結

本篇介紹的內容相對簡單，配置與使用上非常的容易，Runtime Config 在使用上也提供了私有與公開的設定方式，我僅需要記住不要將敏感或機密資訊放置在公開的地方，透過專案下 .env 檔案的你就能很方便的控制開發、測試或生產等環境的環境變數，並在啟動伺服器時自動的載入至 Runtime Config 中。與 App Config 不同的是，App Config 來提供給整個 Nuxt App 使用的響應式配置，同樣也會暴露至客戶端，主要的特性是能夠在應用程式的生命週期來更新這個設定。

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

參考資料

• Dotenv
• Nuxt - .env File