Vue3 Cli로 생성된 프로젝트 / 환경변수 .env 설정하기

Open API 등을 이용해서 프로젝트를 진행할 때, 개인이 발급받은 API키는 Github 등 온라인에 올리지 말아야하기 때문에 환경변수에다 변수를 저장하고 사용한다.

 

Vue Cli 로 생성된 프로젝트에서 환경변수를 사용하고 싶으면 아래의 절차를 따르면 된다.

 

먼저, 프로젝트 최상위 루트에서 .env.local 이라는 이름의 파일을 만든다.

 

 

.env.local 파일은 .env를 덮어쓰는 파일로 Vue Cli 로 프로젝트를 생성하면 .gitignore에 자동으로 등록되어져있다.

 

 

참고

.env	기본 파일
.env.local	env를 덮어쓰는 파일. Test를 제외한 모든 환경에서 로딩됨.
.env.development	개발자 환경에서 로딩됨. .env.development.local은 .env.development를 덮어쓰는 파일.
.env.test	테스트 환경에서 로딩됨. .env.test.local은 .env.test를 덮어쓰는 파일.
.env.production	프로덕션 환경에서 로딩됨. .env.production.local은 .env.production을 덮어쓰는 파일.

 

그런 다음, .env.local 파일 안에  'VUE_APP_환경변수명=API key 혹은 저장하고 싶은 데이터' 로 저장한다.

VUE_APP_API_KEY=password

 

앞에 VUE_APP을 적는 것은 그렇게 하기로 정한 것이기 때문에 그냥 따르면 된다. 이렇게 해두면 import 구문을 쓰지 않고도 프로젝트 내 어디에서나 변수를 불러와 사용할 수 있다.

불러올 때는 process.env.VUE_APP_환경변수명 으로 불러올 수 있다.

 

methods: {
    showEnv() {
      console.log(process.env.VUE_APP_API_KEY)
    }
}

 

그리고 나서 꼭 npm run serve로 서버 재시작을 해주어야 환경변수가 반영된다.