내 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

Nuxt 2 2.13 이전 버전을 사용하는 경우 @nuxtjs/dotenv 모듈이 필요합니다. 이 메소드를 nuxt.config.js 파일에 추가할 수 있습니다:

import dotenv from 'dotenv'
dotenv.config()

위 내용은 내 Nuxt 애플리케이션에서 내 .env 변수가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!