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 중국어 웹사이트의 기타 관련 기사를 참조하세요!