Vue 실행 설정 분리(local, dev, real)

 

추후 관리하는데 필요할것 같아서 Vue 프로젝트 초기설정을 진행하면서 환경변수를 분리하여 사용하고자 했다.

실행시 port를 지정하고 local dev real일때 각각 다른 포트로 수행되도록 스크립트에 넣었다.

그리고 .env파일을 총 4개로 분리하였다.

.env
.env.local
.env.dev
.env.real

로 분리하고 스프링 부트 처럼 공통 설정의 경우 application.yml를 사용하듯이 .env파일에 놔두면 적용이 된다.

"scripts": {
    "local": "vue-cli-service serve --port 3000 --mode local",
    "dev": "vue-cli-service serve --port 3000 --mode dev",
    "real": "vue-cli-service serve --port 80 --mode real",
    "build": "vue-cli-service build --mode real",
    "lint": "vue-cli-service lint"
  },

중요한점은...

env 파일에 환경변수를 넣어서 사용하듯이 url을 넣거나 하는 용도로도 사용가능하지만

민감한 정보는 넣지말라고 한다.

최종 빌드를 하고 결과물이 나오는경우 해당 값들을 확인 할 수 있다는것 같았다.