Nuxt 2 및 3에서 .env 변수를 사용하는 방법은 무엇입니까?

Nuxt 2 또는 3에서 .env 변수 사용

외부 구성을 Nuxt에 통합할 때 .env 파일을 활용해야 합니다. 민감한 데이터는 나중에 Nuxt 구성에서 저장하고 참조할 수 있습니다. 이를 달성하기 위한 포괄적인 가이드는 다음과 같습니다.

Nuxt 2.13 이상에는 .env 지원이 내장되어 있습니다. 이를 활용하려면 다음 단계를 따르세요.

• 프로젝트 루트에 .env 파일을 만듭니다.

• 다음과 같은 변수를 정의합니다.

  MY_VARIABLE="Hello World"

• nuxt.config.js에서 .env 값을 publicRuntimeConfig로 가져옵니다. 또는 privateRuntimeConfig 객체:

  export default {
  publicRuntimeConfig: {
    myPublicVariable: process.env.MY_VARIABLE,
  },
  privateRuntimeConfig: {
    myPrivateVariable: process.env.MY_PRIVATE_VARIABLE,
  },
  }

Nuxt 3에서는 프로세스가 약간 다릅니다:

• nuxt.config.js에서:

  import { defineNuxtConfig } from 'nuxt3'
  
  export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      myPublicVariable: process.env.MY_VARIABLE,
    },
  },
  })

• 어떤 경우에도 구성요소:

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

• 컴포저블 내:

  export default () => {
  const config = useRuntimeConfig()
  console.log(config.myPublicVariable)
  }

.env 파일에서 변수를 정의할 때 공백과 특수 문자. 예:

API_URL=https://example.com/api

이제 Nuxt 애플리케이션 어디에서나 이러한 변수에 쉽게 액세스할 수 있습니다. 문제가 발생하면 공식 Nuxt 문서에서 추가 지침을 참조하세요.

위 내용은 Nuxt 2 및 3에서 .env 변수를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!