환경 변수 파일 만들기

• .env 파일에는 환경변수를 만들 수 있다.
• /src 소스 root에 .env를 만들어야 한다.
• key와 밸류 형태이다. key=value
• 사용자가 추가하는 변수는 VUEAPP 를 앞에 붙여야한다.
• 수정후 npm run 빌드를 해야 한다.

VUE_APP_API_URL=http://localhost:3333/
VUE_APP_NAME=default

환경 변수 사용

• 자바스크립트 파일에서 환경 변수 접근하기
• process.env. 사용자가 추가한 환경 변수에 접근이 가능 하다

const HOST_ADD = process.env.VUE_APP_HOST;

사용자 환경 변수 파일 만들기

• /src에 .env.test 파일 생성

VUE_APP_API_URL=http://localhost:3333/
VUE_APP_NAME=test

빌드에 따른 환경 변수 사용

• vue.js 기준으로 npm run serve는 기본적으로 .env에 있는 환경변수 사용
• package.json의 script의 test 를 만들어 --mode가 test이면 .env.test 환경변수를 기반으로 빌드 진행
• npm run test 수행 시 .env.test 환경변수를 사용하여 자바스크립트에서 process.env.VUE_APP_NAME 로그 찍어보면 test가 저장되어있음

  "scripts": { 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service serve --mode test"
  },