javaScript/vueJs

VUE dotenv // vue에서 환경변수 설정

부엉이사장 2023. 1. 16. 10:58

vue에서 환경변수를 설정해서 사용하려고 한다.

open api사용하려는데 키 관리하려고 했다..

 

사용법은 간단하다.

 

 

 

# .env파일을 만든다.

나는 secret 값을 넣어봤따.

VUE_APP_secret = 1234

 

 

# app.vue에서 스크립트부분에서

console.log(process.env.VUE_APP_secret) //1234

으로 부르면 값이 제대로 가져와진다.

 

 

 

dotenv 모듈을 설치할 필요도 없고 아주 간단하다.

 

다만 중요한점은 위에서도 secret이라는 변수를 쓰기위해

VUE_APP_을 꼭 앞에 붙여줘야한다는거다.

안붙여주면 못가져온다.

 

사용자편의를 위해서 이렇게 만들었다고 함.

 

 

 

 

 

 

++ 참고로 .env를 수정했을때 nodemon 켜놨다고 app.vue만 저장하면 리셋되지 않는다.

npm run serve로 다시 재가동을 해야 수정된 .env가 적용된다.