[Vue] Vite에서 환경변수 env 사용하기

Vite는 프론트엔드 개발을 위한 빠르고 현대적인 빌드 도구입니다. 환경변수를 사용하여 개발, 테스트 및 프로덕션 환경에서 앱의 구성을 쉽게 관리할 수 있습니다.

1. 환경변수 설정

Vite는 .env 파일을 사용하여 환경변수를 설정합니다. 이 파일은 프로젝트 루트 디렉터리에 위치해야 합니다.

.env 파일에 각 환경변수를 다음 형식으로 정의합니다.

KEY=VALUE

예를 들어, 다음은 API_KEY 및 BASE_URL 환경변수를 설정하는 .env 파일입니다.

API_KEY=my-secret-api-key
BASE_URL=https://my-app.com

주의: 민감한 정보(예: API 키, 비밀번호)는 .env 파일에 저장하지 마세요. 이러한 정보는 환경변수로 설정해야 합니다.

2. 코드에서 환경변수 사용

Vite는 import.meta.env 객체를 사용하여 코드에서 환경변수에 접근할 수 있도록 합니다.

다음은 import.meta.env를 사용하여 API_KEY 및 BASE_URL 환경변수에 접근하는 방법입니다.

JavaScript

import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  env: {
    API_KEY: import.meta.env.VITE_API_KEY,
    BASE_URL: import.meta.env.VITE_BASE_URL,
  },
});

코드를 사용할 때는 주의가 필요합니다.

 

참고:

• VITE_ 접두사는 Vite에서 사용하는 환경변수의 기본 접두사입니다.
• .env 파일에 정의된 환경변수 이름은 접두사 없이 사용해야 합니다.
• TypeScript를 사용하는 경우 import.meta.env 객체에 대한 타입 정의를 추가해야 합니다. 자세한 내용은 [Vite 문서]([유효하지 않은 URL 삭제됨] 참조하십시오.

3. 다양한 환경에서 환경변수 사용

Vite는 다양한 환경(개발, 테스트, 프로덕션)에서 서로 다른 환경변수를 사용할 수 있도록 합니다.

다음은 .env, .env.production, .env.test 파일을 사용하여 각 환경에 대한 환경변수를 설정하는 방법입니다.

• 개발: .env 파일을 사용합니다.
• 테스트: .env.test 파일을 사용합니다.
• 프로덕션: .env.production 파일을 사용합니다.

각 환경에서 특정 환경변수에만 액세스해야 하는 경우 .env.* glob 패턴을 사용하여 특정 파일에만 적용되는 환경변수를 정의할 수 있습니다.

예를 들어, 다음은 API_KEY는 개발 및 테스트 환경에서만 사용되고 BASE_URL은 모든 환경에서 사용되는 환경변수를 설정하는 방법입니다.

# .env
API_KEY=my-development-api-key

# .env.test
API_KEY=my-test-api-key

4. HTML 템플릿에서 환경변수 사용

Vite는 HTML 템플릿에서도 환경변수를 사용할 수 있도록 합니다.

다음은 import.meta.env를 사용하여 HTML 템플릿에서 BASE_URL 환경변수에 접근하는 방법입니다.

HTML

<script>
  import { BASE_URL } from 'import.meta.env';
</script>

<img src="${BASE_URL}/logo.png" alt="Logo">

 

참고:

• HTML 템플릿에서 환경변수를 사용하려면 import.meta.env 객체를 스크립트 태그 내에서 가져와야 합니다.
• 특수 구문 %ENV_NAME%을 사용하여 HTML 파일에서 환경변수를 직접 대체할 수도 있습니다. 자세한 내용은 [Vite 문서]([유효하지 않은 URL 삭제됨] 참