如何在 Nuxt 2 或 3 中存取 .env 變數：綜合解決方案

Nuxt 2 或3 中的.env 變數：全面的解決方案

Nuxt.js 讓您透過.env 檔案無縫管理環境變量，但遇到問題並不是罕見。本指南為在 Nuxt 配置中存取 .env 變數時反覆出現的問題提供了逐步解決方案。

問題描述

您在嘗試讀取時遇到 Nuxt 應用程式故障nuxt.config.js 或其他模組中 .env 的環境變數。控制台錯誤表示儘管在 .env 檔案中指定了某個金鑰，但缺少金鑰。

根本原因

在早期版本的 Nuxt 中，.env 變數不會自動載入到應用程式中。需要其他套件（例如 @nuxtjs/dotenv）來促進載入過程。然而，隨著 Nuxt 2.13 的推出，dotenv 處理現已內建在框架中，不再需要外部套件。

解決方案

對於Nuxt 2.13 或更高版本：

1. 建立.env 檔案：
2. 建立.env 檔案： 將. env 檔案放置在專案的根目錄中，並在其中指定環境變數。確保它被 Git 忽略。

定義您的設定：

export default {
    publicRuntimeConfig: {
        myPublicVariable: process.env.PUBLIC_VARIABLE,
    },
    privateRuntimeConfig: {
        myPrivateToken: process.env.PRIVATE_TOKEN,
   }
}

在 nuxt.config.js 中，使用 publicRuntimeConfig 或 privateRuntimeConfig 來定義您的 .env 變數。

存取你的變數：

用這個。後跟配置名稱以存取 .vue 檔案或外掛程式中的變數。例如： this.myPublicVariable.

對於Nuxt 3:
2. HruntimeConfig:
. ，定義您的運行時配置。
3. 定義變數：
在公共物件內，將環境變數指派給各自的鍵。

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
    runtimeConfig: {
        public: {
            secret: process.env.SECRET,
        }
    }
}

存取您的變數：

利用 useRuntimeConfig() 存取元件或可組合項目中的變數。

• 其他提示

當定位伺服器模式（目標：伺服器）時，您可以更新環境變數而不重建。只需再次運行yarn start即可。

訪問 Nuxt.js 官方文件以獲取有關 RuntimeConfig 的更多資訊。

結論按照以下步驟，您可以有效地使用Nuxt 2 或 3 中的 .env 變數。請記住，.env 檔案對於儲存敏感資訊和配置值非常有價值，確保它們不會暴露給公眾。

以上是如何在 Nuxt 2 或 3 中存取 .env 變數：綜合解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！