Quasar vue.js <script setup>에서 개발시.env에

Quasar와 Vue.js에서 .env 파일의 환경 변수를 자동으로 변경하여 API_BASE_URL과 같은 값을 환경에 따라 다르게 사용할 수 있습니다. Quasar에서는 .env 파일을 환경별로 분리하여 개발, 빌드, 배포 시 자동으로 설정되도록 지원합니다.

1. .env 파일 구성하기

Quasar는 환경별 .env 파일을 지원하므로 다음과 같이 환경별 .env 파일을 만들 수 있습니다:

• .env : 기본값(모든 환경에 적용)
• .env.development : 개발 환경용 변수
• .env.production : 배포 환경용 변수
• .env.test : 테스트 환경용 변수

예시:

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

# .env.production
VITE_API_URL=https://api.example.com

2. import.meta.env로 변수 사용하기

<script setup>에서 환경 변수 값을 사용하려면 아래와 같이 import.meta.env를 통해 접근할 수 있습니다.

const API_BASE_URL = import.meta.env.VITE_API_URL;

3. Quasar CLI 설정

Quasar는 자동으로 환경별 .env 파일을 로드하며, quasar dev, quasar build 명령어 실행 시 올바른 .env 파일을 읽습니다. 예를 들어, 개발 시 quasar dev를 실행하면 .env.development 파일이 사용되며, 배포를 위해 quasar build를 실행하면 .env.production 파일이 사용됩니다.

이를 통해 개발 환경, 배포 환경에서 API URL이 자동으로 바뀌며, 코드에서 추가적인 조정 없이 환경별로 다른 값을 사용할 수 있습니다.