Nuxt 2 または 3 プロジェクトで環境変数にアクセスするにはどうすればよいですか?

Nuxt 2 または 3 での環境変数へのアクセス: .env が簡単になりました

Nuxt 2 または Nuxt プロジェクトで環境変数を使用する場合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 中国語 Web サイトの他の関連記事を参照してください。