Nuxt.js で .env 変数を使用すると「ReCaptcha エラー: キーが提供されていません」というメッセージが表示されるのはなぜですか?

Nuxt.js での .env 変数の使用

問題:

変数を読み取って Nuxt.js で ReCaptcha を構成する場合.env ファイルからの場合、アプリケーションはエラーで失敗します。 「ReCaptcha エラー: キーが提供されていません」というコンソール ログ エラー。キーを直接ハードコーディングしても問題は解決せず、nuxt.config の .env 変数の読み取りに問題があることが示唆されます。

解決策:

Nuxt.js バージョン 2.13 の場合以降が使用されている場合、フレームワークは自動的に .env 変数をサポートします。 .env から変数にアクセスするには:

1. プロジェクトのルートに .env ファイルを作成し、キーと値を追加します。例:

   RECAPTCHA_SITE_KEY=6L....

2. nuxt.config.js で、publicRuntimeConfig またはアクセス レベルに応じた privateRuntimeConfig:

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

相違点:

• publicRuntimeConfig はどこからでもアクセスできます。
• privateRuntimeConfig は SSR 中にのみ使用できます (サーバー側)

例:

this.$config.myPublicVariable  // accessing from Vue.js file

Nuxt.js バージョン 3 の場合:

変数の定義実行時の設定でnuxt.config.js:

import { defineNuxtConfig } from 'nuxt3'

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

コンポーネントまたはコンポーザブル内:

import { useRuntimeConfig } from '#app'
const config = useRuntimeConfig()

追加情報については、Nuxt.js の公式ドキュメントを参照してください:
https://nuxtjs .org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

以上がNuxt.js で .env 変数を使用すると「ReCaptcha エラー: キーが提供されていません」というメッセージが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。