[Nuxt3] Nuxt에서 dotenv 를 통한 환경변수 설정과 분리

1. 개요

 

기존에, vuejs등 개발을 해오시던분이라면, dotenv 에 대해 한번쯤 들어보셨을겁니다.

 

여러 변수들을 전역으로 사용할때, dotenv를 사용해보신 분들이 많을텐데요.

 

저도, dotenv를 사용하며 .env.development , .env.production 등 개발환경에 따라

 

나누어 설정하고 사용했었습니다.

 

하지만, Nuxt3에서 적용하려고 하니 기존의 방법으론 적용되지 않더군요.

 

해당 방법을 아래 예제를 통해 알아보도록 하겠습니다.

 

2. 예제

 

yarn add @nuxtjs/dotenv

 

일단 dotenv를 디펜던시에 추가해주도록 합니다.

 

[nuxt.config.ts]

 

// 스크립트를 통해 --dotenv .env.prd 파일을 지정해주도록 한다.
// 위의 기능을 위해, 아래와 같이 한번 config 함수를 호출시켜줘야 한다.
require('dotenv').config();

export default defineNuxtConfig({
	modules: [
		'@nuxtjs/dotenv'
	]
})

 

 

이후, 스크립트로 실행할때 --dotenv {.env파일명} 추가해서 실행시켜주시면 분기되어 적용 됩니다.

 

"scripts": {
  "dev": "nuxt dev",
  "dev-envtest": "nuxt dev --dotenv .env.dev",
  "prd-envtest": "nuxt dev --dotenv .env.prd"
}