Vue 환경변수

Vue에서 환경변수를 사용하기 위해서는 프로젝트 루트경로에 .env 파일을 생성해야한다.

.env 파일은 키 = 값 형태로 정의할 수 있고 반드시 앞에 VUE_APP_을 붙여줘야한다.

개발 모드와 배포 모드를 구분하여 환경을 구성해야 한다.

 

VUE_APP_API_URL=http://localhost:8888

 

.env 파일은 .env.development와 .env.production 파일에 없는 공통 값을 지정하기 위해 사용한다.

 

.env.development는 npm run serve를 별다른 옵션없이 사용하면 development 환경으로 인식하기 때문에 

이 환경변수를 사용한다.

 

.env.production 파일은 배포 모드에서만 동작한다.

 

환경변수를 테스트할때는 npm run serve를 다시 실행해줘야 정상 반영된다.

process.env를 console.log로 출력해보면 .env에 작성한 환경변수들을 볼 수 있다.

 

로컬 환경 변수

.env.development # 팀 공용 환경 변수
.env.development.local # 개인 디버깅 또는 개발용 환경 변수

위와 같이 개인적으로 로컬 이나 특정 서버 디버깅을 위해 .env.development.local 파일을 만들어 관리할 수 있다.

.local파일은 git에도 올라가지 않기 때문에 편하기 사용할 수 있다.