透過 100 多個技巧學習 Nuxt!

.env

一個 .env 檔案指定了你的建置/開發時期的環境變數。
這個檔案應該加入你的 .gitignore 檔案中,以避免將機密資訊推送到你的儲存庫。

開發、建置和產生時期

Nuxt CLI 在開發模式下以及執行 nuxi buildnuxi generate 時,內建了 dotenv 支援。

除了任何 process 環境變數之外,如果你的專案根目錄中有一個 .env 檔案,它將會在開發、建置和產生時期自動載入。任何在那裡設定的環境變數都可以在你的 nuxt.config 檔案和模組中存取。

.env
MY_ENV_VARIABLE=hello
請注意,從 .env 中移除變數或完全移除 .env 檔案不會取消已設定的值。

自訂檔案

如果你想使用不同的檔案 - 例如,使用 .env.local.env.production - 你可以在使用 nuxi 時傳遞 --dotenv 標誌來實現。

終端機
npx nuxi dev --dotenv .env.local

當在開發模式下更新 .env 時,Nuxt 實例會自動重新啟動,以將新值套用到 process.env

在你的應用程式程式碼中,你應該使用 執行階段設定 而不是純粹的 env 變數。

生產環境

在你的伺服器建置完成後,你需要在執行伺服器時負責設定環境變數。

你的 .env 檔案在這個階段不會被讀取。你如何做到這一點對於每個環境都是不同的。

這個設計決策是為了確保跨各種部署環境的相容性,其中一些環境可能沒有可用的傳統檔案系統,例如無伺服器平台或像 Cloudflare Workers 這樣的邊緣網路。

由於 .env 檔案不會在生產環境中使用,你必須使用你的主機環境提供的工具和方法來明確設定環境變數。以下是一些常見的方法:

  • 你可以使用終端機將環境變數作為引數傳遞
    $ DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs
  • 你可以在 shell 設定檔中設定環境變數,例如 .bashrc.profile
  • 許多雲端服務提供商,例如 Vercel、Netlify 和 AWS,都提供了透過其儀表板、CLI 工具或設定檔來設定環境變數的介面。

生產環境預覽

對於本地生產環境預覽的目的,我們建議使用 nuxi preview,因為使用這個指令,.env 檔案為了方便起見將會被載入到 process.env 中。請注意,這個指令需要在套件目錄中安裝依賴項。

或者你可以使用終端機將環境變數作為引數傳遞。例如,在 Linux 或 macOS 上

終端機
DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs

請注意,對於純靜態網站,在你的專案預先渲染後,無法設定執行階段設定。

文件 > 指南 > 深入探討 > 執行階段設定 中閱讀更多內容。
如果你想使用在建置時期設定的環境變數,但不關心之後的更新(或只需要在你的應用程式內部反應式地更新它們),那麼 appConfig 可能會是更好的選擇。你可以在 nuxt.config 中(使用環境變數)以及你的專案中的 ~/app.config.ts 檔案中定義 appConfig
文件 > 指南 > 目錄結構 > 應用程式設定 中閱讀更多內容。