Nuxt 2 또는 3에서 .env 변수를 사용하는 방법

Nuxt 2 또는 3에서 .env 변수를 사용하는 방법

프로젝트 루트에 .env 파일이 있으며, nuxt 구성에서 변수를 사용하여 다음과 같이 ReCaptcha를 구성한다.

import dotenv from 'dotenv'
dotenv.config()

export default {
    modules: [
        ['@nuxtjs/recaptcha', {
          siteKey: process.env.RECAPTCHA_SITE_KEY,
          version: 3,
          size: 'compact'
        }],
    ]
}

다음과 같은 .env에서:

RECAPTCHA_SITE_KEY=6L....

그러나 애플리케이션은 항상 콘솔 로그 오류로 인해 실패함:

다시 캡차 오류:제공된 키 없음

ReCaptcha 키를 직접 하드 코드화할 때:siteKey: 6L....앱이 작동하기 시작하니, nuxt.config에서 .env 소품을 읽는 것이 문제인 것 같다.

어떻게 고치는지 알기나 해?

편집: @pxtu 권장 사항과 예시를 통해 https://www.npmjs.com/package/@nuxtjs/propertcha를 업데이트해 보았다.

따라서 nuxt.config도 작동하지 않음:

export default {
    modules: [
       '@nuxtjs/recaptcha',
    ],
    publicRuntimeConfig: {
       recaptcha: {
         siteKey: process.env.RECAPTCHA_SITE_KEY,
         version: 3,
         size: 'compact'
       }
  }
}

Nuxt 버전이 2.13 이상이면 사용할 필요가 없음@nuxtjs/dotenv이미 프레임워크에 백업되어 있기 때문에 비슷한 것.

일부 변수를 사용하려면.env프로젝트의 루트에 파일을 저장하십시오.이것은 git으로 무시되어야 한다.그런 다음 키 몇 개를 입력하면 된다.

PUBLIC_VARIABLE="https://my-cool-website.com"
PRIVATE_TOKEN="1234qwer"

당신 안에nuxt.config.js사용 사례에 따라 두 개의 객체에 입력해야 한다.publicRuntimeConfig또는privateRuntimeConfig:

export default {
  publicRuntimeConfig: {
    myPublicVariable: process.env.PUBLIC_VARIABLE,
  },
  privateRuntimeConfig: {
    myPrivateToken: process.env.PRIVATE_TOKEN
  }
}

차이점:publicRuntimeConfig기본적으로 어디에서나 사용할 수 있는 반면privateRuntimeConfigSSR 동안만 사용할 수 있다(키 한 개는 브라우저로 발송되지 않은 경우에만 비공개 상태를 유지할 수 있다.

에 대한 일반적인 사용 사례.privateRuntimeConfig빌드 프로세스 동안 또는 빌드 프로세스 동안 사용하기 위함(기존재yarn build또는yarn generate앱을 헤드리스 CMS의 API 호출로 채우기 위해.

자세한 내용은 이 블로그 게시물을 참조하십시오. https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

---

• 그러면, 당신은 그것을 어느 곳에도 접근할 수 있을 것이다..vue에 직접 제출하다.

this.$config.myPublicVariable

• Nuxt's에 접속하면/plugins또한, 이 구문에서는

export default ({ $axios, $config: { myPublicVariable } }) => {
  $axios.defaults.baseURL = myPublicVariable
}

• Nuxt 모듈 또는 키에 이 변수가 필요한 경우nuxt.config.js파일, 직접 작성

process.env.PRIVATE_TOKEN

경우에 따라 구문이 약간 다를 수 있으며, 이 경우 Nuxt 모듈 설명서를 참조하십시오.

// for @nuxtjs/gtm
publicRuntimeConfig: {
  gtm: {
    id: process.env.GOOGLE_TAG_MANAGER_ID
  }
},

---

PS: 사용할 경우target: server(기본값), 다음 작업을 수행할 수 있음yarn build그리고yarn start애플리케이션을 프로덕션에 배포하십시오.그런 다음 원하는 환경 변수를 변경하고yarn start다시. 재건할 필요가 없을 것이다.따라서 RuntimeConfig라는 이름이 붙었다!

Nuxt3 업데이트

여기서 언급한 바와 같이 Nuxt3는 다음과 같이 사용할 수 있다.

nuxt.config.js

import { defineNuxtConfig } from 'nuxt3'

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

모든 구성 요소에서

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

아주 쉽다.axios/nuxt 예시 제공

1. 를 '수능의'에서 정의하라..env파일:

   baseUrl=http://localhost:1337

2. nuxt.config.js에 변수를 invide-object에 추가(Axios 구성에서 사용):

   export default {env: {baseUrl: process.env.baseUrl},axios: {baseURL: process.env.baseUrl},}

3. 다음과 같은 파일에 환경 변수를 사용하십시오.

   console.log(process.env.baseUrl)

console.log(process.env)는 {}을(를) 출력하지만 console.log(process.env.baseUrl)는 여전히 값을 출력한다는 점에 유의하십시오!

또한 당신은 또한 그것을 사용할 수 있다.envNuxt nxt.config.js가 있는 속성:

export default {
  // Environment variables
  env: {
    myVariable: process.env.NUXT_ENV_MY_VAR
  },
  ...
}

그런 다음 플러그인에서 다음을 수행하십시오.

const myVar = process.env.myVariable

참조URL: https://stackoverflow.com/questions/67703133/how-to-use-env-variables-in-nuxt-2-or-3