LeeHyoGeun

.env 파일은 파일의 최상단에 위치시켜 두고

생성 후 보통 api key 값들을 넣어두어 

유출되면 요금 폭탄이 발생할 수 있어 

꼭! .gitignore에 .env를 적어두도록 하자

# .env.development
VITE_APP_URL=http://localhost:3000

# .env.production
VITE_APP_URL=https://api.myapp.com

이렇게 따로 파일을 만들어 

두 경우에 대응 할 수 있다

.env                # 모든 상황에서 사용될 환경 변수
.env.local          # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수
.env.[mode]         # 특정 모드에서만 사용될 환경 변수
.env.[mode].local   # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수

https://ko.vitejs.dev/guide/env-and-mode 

vite는 다른 양식을 쓰고 있다

typescript를 사용하는 경우 아래의 경우도 적용해야한다

TypeScript를 위한 인텔리센스​

src 디렉터리 내 vite-env.d.ts 파일을 생성한 후, 아래와 같이 ImportMetaEnv를 정의하여 VITE_ 환경 변수에 대한 타입을 정의할 수 있습니다.

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 다른 환경 변수들에 대한 타입 정의...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

만약 코드가 DOM이나 WebWorker와 같이 브라우저 환경의 타입이 필요하다면, tsconfig.json에서 lib 필드에 이를 명시해줄 수 있습니다.

json

{
  "lib": ["WebWorker"]
}

import는 타입 확장을 동작하지 않도록 합니다

만약 ImportMetaEnv가 정의되지 않는다면, vite-env.d.ts에 import 구문이 없는지 확인해 주세요. 더 자세한 내용은 TypeScript 문서에서 확인할 수 있습니다.