Nuxt アプリケーションで .env 変数が機能しないのはなぜですか?

Nuxt 2 および 3 の .env 変数のトラブルシューティング

問題の説明

Nuxt アプリケーションで .env 変数を使用してモジュールを構成すると、エラーが発生する場合があります。 ReCaptcha など。必要なキーを含む .env ファイルが存在するにもかかわらず、コンソールに「ReCaptcha エラー: キーが提供されていません」と表示されることがあります。

説明

Nuxt 2.13 以降では、@nuxtjs/dotenvランタイム構成がフレームワークに組み込まれているため、モジュールは必要なくなりました。 .env 変数を利用するには、次の手順に従います。

Nuxt 2.13

• プロジェクト ルートに .env ファイルを作成します。

• 必要な変数をインポートします。の中へnuxt.config.js:

  export default {
  publicRuntimeConfig: {
    recaptcha: {
      siteKey: process.env.RECAPTCHA_SITE_KEY,
      version: 3,
      size: 'compact'
    }
  }
  }

  ログイン後にコピー
• this.$config を使用してコンポーネント内の変数を使用します。

Nuxt 3

• インポート以下:

  import { defineNuxtConfig } from 'nuxt3'

  ログイン後にコピー

• nuxt.config.js で以下を使用します:

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

  ログイン後にコピー

• 使用してコンポーネント内の変数を使用しますuseRuntimeConfig():

  <script setup lang="ts">
  const config = useRuntimeConfig()
  config.secret
  </script>

  ログイン後にコピー

• コンポーザブルで変数を使用する:

  export default () => {
  const config = useRuntimeConfig()
  console.log(config.secret)
  }

  ログイン後にコピー

Nuxt 2 Pre-2.13

2.13 より前の Nuxt 2 を使用している場合、 @nuxtjs/dotenv モジュールが必要です。このメソッドを nuxt.config.js ファイルに追加できます:

import dotenv from 'dotenv'
dotenv.config()

以上がNuxt アプリケーションで .env 変数が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。