透過 100+ 個技巧的集合來學習 Nuxt!

.env

.env 檔案指定您的建置/開發時期環境變數。
此檔案應新增至您的 .gitignore 檔案,以避免將機密資訊推送至您的儲存庫。

開發、建置與產生時期

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

除了任何程序環境變數之外,如果您在專案根目錄中有一個 .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 檔案在此時不會被讀取。如何執行此操作在每個環境中都不同。

此設計決策是為了確保跨各種部署環境的相容性,其中某些環境可能沒有可用的傳統檔案系統,例如無伺服器平台或邊緣網路(如 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
文件 > 指南 > 目錄結構 > App Config 中閱讀更多資訊。