Nuxt 2 또는 3에서 .env 변수에 액세스하는 방법: 포괄적인 솔루션

.env Nuxt 2 또는 3의 변수: 포괄적인 솔루션

Nuxt.js를 사용하면 .env 파일을 통해 환경 변수를 원활하게 관리할 수 있지만 문제가 발생하는 것은 아닙니다. 드문. 이 가이드는 Nuxt 구성에서 .env 변수에 액세스할 때 반복되는 문제에 대한 단계별 솔루션을 제공합니다.

문제 설명

읽는 동안 Nuxt 애플리케이션에서 오류가 발생했습니다. nuxt.config.js 또는 다른 모듈 내 .env의 환경 변수. 콘솔 오류는 .env 파일에 키가 지정되었음에도 불구하고 키가 누락되었음을 나타냅니다.

근본 원인

Nuxt의 이전 버전에서는 .env 변수가 애플리케이션에 자동으로 로드되지 않았습니다. 로딩 프로세스를 용이하게 하려면 @nuxtjs/dotenv와 같은 추가 패키지가 필요했습니다. 그러나 Nuxt 2.13이 도입되면서 이제 dotenv 처리가 프레임워크에 내장되어 외부 패키지가 필요하지 않게 되었습니다.

솔루션

Nuxt 2.13 이상:

1. .env 파일 만들기: 프로젝트 루트에 .env 파일을 배치하고 그 안에 환경 변수를 지정합니다. Git에서 무시되는지 확인하세요.
2. 구성 정의: nuxt.config.js에서 publicRuntimeConfig 또는 privateRuntimeConfig를 사용하여 .env 변수를 정의하세요.

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

3. 변수에 액세스: 이것을 사용하세요. 그 뒤에는 .vue 파일이나 플러그인의 변수에 액세스하기 위한 구성 이름이 옵니다. 예: this.myPublicVariable.

Nuxt 3의 경우:

1. runtimeConfig 구성: nuxt.config.js에서 , 런타임 구성을 정의합니다.
2. 변수 정의: 공용 객체 내에서 환경 변수를 해당 키에 할당합니다.
3. 변수에 액세스: useRuntimeConfig()를 활용하여 구성요소 또는 컴포저블의 변수에 액세스합니다.

import { defineNuxtConfig } from 'nuxt3'

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

추가 팁

• 서버 모드(대상: 서버)를 타겟팅할 때 다음을 수행할 수 있습니다. 다시 빌드하지 않고 환경 변수를 업데이트하십시오. 간단히 Yarn start를 다시 실행하세요.
• RuntimeConfig에 대한 자세한 내용은 공식 Nuxt.js 설명서를 참조하세요.

결론

다음 단계를 따르면 RuntimeConfig를 효과적으로 사용할 수 있습니다. Nuxt 2 또는 3의 .env 변수. .env 파일은 민감한 정보와 구성 값을 저장하고 대중에게 노출되지 않도록 하는 데 유용합니다.

위 내용은 Nuxt 2 또는 3에서 .env 변수에 액세스하는 방법: 포괄적인 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!