env 파일

env 파일이란?

vue-CLI3 기준으로 서버의 endpoint API 주소를 환경변수를 관리하는 방법입니다.

env 파일 규칙

파일 위치 & 파일 명
.env.{mode명} 폴더를 root위치에 만들고 환경 변수를 지정해 줍니다.
root 위치가 아니면 동작하지 않으므로 주의해주세요.

key = value 형식

사용자 정의 환경변수 형태
VUE_APP_변수명 형태로 VUE_APP이 prefix되어야 인식되어 자동 로드합니다.

env파일 사용 전 파일 형태

src/spi/index.js

import axios from "axios";

const instance = axios.create({
  baseURL: 'http://localhost:3000',
});

function registerUser(userData) {
  return instance.post("signup", userData);
}

export { registerUser };

env파일 사용 후 파일 형태

src/spi/index.js

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
});

function registerUser(userData) {
  return instance.post("signup", userData);
}

export { registerUser };

.env
공통값
.env.development, .env.production 에 설정한 환경변수가 없을 경우 공통으로 들어가는 내용 정의

VUE_APP_API_URL = http://vue-til.com/

.env.development
개발용
npm run serve 개발용 명령어 입력시 development 모드로 로컬 서버 주소 정의

VUE_APP_API_URL = http://localhost:3000

.env.production
빌드용(배포)
npm run build 빌드 명령어 입력시 production 모드로 배포에 해당하는 도메인 주소 정의

VUE_APP_API_URL = http://vue-til.com/

파일 우선순위

1. .env.development, .env.production
2. .env
   따라서, 우선순위가 높은 파일에 설정값이 있을 경우 해당 설정값으로 적용
   없을 경우 .env 에서 설정한 값이 default 로 적용

test

npm run serve 개발용 명령어 입력시 endpoint가 .env.development에서 설정한 url 주소인 'http://localhost:3000' 으로 노출되는 것을 확인 할 수 있습니다.

Q&A

.env 설정값을 변경했는데 적용되지 않습니다.
설정값 변경시 webpack에서 인지하지 못하기 때문에 서버를 껐다가 다시 켜주세요.

참고

Modes and Environment Variables
https://cli.vuejs.org/guide/mode-and-env.html#modes