> 웹 프론트엔드 > JS 튜토리얼 > Nuxt.js에서 .env 변수를 사용할 때 'ReCaptcha 오류: 키가 제공되지 않음'이 나타나는 이유는 무엇입니까?

Nuxt.js에서 .env 변수를 사용할 때 'ReCaptcha 오류: 키가 제공되지 않음'이 나타나는 이유는 무엇입니까?

Patricia Arquette
풀어 주다: 2024-12-03 05:02:09
원래의
340명이 탐색했습니다.

Why Am I Getting a

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿