VUE 환경변수

VUE 환경변수에 대해 간단하게 알아보기

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.(출처 : https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)

---

Vue에서 환경변수는 'NODE_ENV', 'BASE_URL', 'VUE_APP_' 으로 시작하는 경우에만 웹팩에 포함되게 된다.
동일 이름으로 비밀 번호등의 주요한 정보가 노출되지 않게 하기 위한 것.

'NODE_ENV'
- 실행 환경을 의미하여 일반적으로 Localhost, Development, Staging, Production 등으로 나뉜다.
이에 따라 env 파일을 생성하여 환경 별로 세팅을 해준 후 사용한다.

'BASE_URL'
- 서버 동작시 기준이 되는 URL.

'VUE_APP_*'
- VUE_APP을 접두어로 사용해 환경변수를 지정하면, 환경별로 변수를 저장해놓고 사용가능하다.
예를들어 LocalHost 환경에서 사용할 URL과, DEV 환경에서 사용할 URL이 다르거나 할때 환경 파일에 저장해놓고 사용하면 관리 및 사용 측면에서 유리하다.

사용 예제.

NODE_ENV=production

BASE_URL=https://www.apple.com
VUE_APP_TITLE=APPLE
VUE_APP_SUPPORT=https://support.apple.com/?cid=gn-ols-home-hp-tab
VUE_APP_PRODUCT_IPHONE=${BASE_URL}/iphone/

실제로 사용할때는 Module Federation이 된 경우, 백엔드 서버나, 프론트 서버의 Context-Path별로 VUE_APP_블라블라 형식으로 저장해서 사용 가능하다.

간단한 변수 사용예제

const res = axios
	.post(process.env.VUE_APP_PRODUCT_IPHONE)
    .then(() => { ... })
    .catch(() => { ... })

 

자주 안보니 까먹는것 같아서 까먹지 말라고 적어놓기..