如何存取 Nuxt 2 或 3 專案中的環境變數？

在Nuxt 2 或3 中存取環境變數：.env 變得簡單

在Nuxt 專案中使用環境變數時，無論是Nuxt 2 還是3、了解正確的方法很重要。在本文中，我們將探討如何在 Nuxt 配置中從 .env 檔案中讀取環境變數。

在 Nuxt 2.13 或更高版本中，不再需要使用 @nuxtjs/dotenv，因為框架本身支援環境變數。要定義變量，請在專案的根目錄中建立 .env 文件，並用鍵值對填充它。

Nuxt 2.13 或更高版本

在您的 nuxt 中.config.js，使用 publicRuntimeConfig 或 privateRuntimeConfig 定義環境變數，視其預期用途變數而定。

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

Nuxt 3

Nuxt 3 在中引入了 runtimeConfig 物件nuxt.config.js。在此定義環境變數：

import { defineNuxtConfig } from 'nuxt3';

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

要在元件中存取這些變量，請在 Nuxt 2 中使用 this.$config ，在 Nuxt 3 中使用 useRuntimeConfig()。

存取環境Nuxt.config 中的變數

對於 Nuxt.config，您可以使用 process.env.VARIABLE_NAME 直接存取環境變數。

export default {
  modules: [
    ['@nuxtjs/recaptcha', {
      siteKey: process.env.RECAPTCHA_SITE_KEY,
      version: 3,
      size: 'compact',
    }],
  ],
};

依照以下步驟，您可以無縫使用Nuxt 專案中的環境變數。請注意，根據您使用的 Nuxt 包，語法可能會略有不同。具體指導請參考官方文件。

以上是如何存取 Nuxt 2 或 3 專案中的環境變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！