[Vue] process.env.XXXX 사용시, 왜 undefined 가 생기지?

 

.env.production 파일에 아래와 같이 설정하고

# production 설정파일

NODE_ENV=production
BASE_URL=/
KAKAO_URL=https://www.kakaocorp.com/

//js단

alert(`${process.env.KAKAO_URL}`);

아무리 호출해도 안되길래 구글링해서 봤더니... 역시 document는 진리!

Note that only NODE_ENV, BASE_URL, 

and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. 

It is to avoid accidentally exposing a private key on the machine that could have the same name.

뜨쉬~ NODE_ENV, BASE_URL 요고는 기본으로 동작되는데

그외엔 VUE에서 사용하려면, VUE_APP_ 을 prefix로 붙여줘야하는 것이였다... ㅠㅠ

결론 VUE_APP_ 을 prefix로 사용하자! 

# production 설정파일

NODE_ENV=production
BASE_URL=/
VUE_APP_KAKAO_URL=https://www.kakaocorp.com/

//js단

alert(`${process.env.VUE_APP_KAKAO_URL}`);