vue-CLI3 기준으로 서버의 endpoint API 주소를 환경변수를 관리하는 방법입니다.
파일 위치 & 파일 명
.env.{mode명} 폴더를 root위치에 만들고 환경 변수를 지정해 줍니다.
root 위치가 아니면 동작하지 않으므로 주의해주세요.
key = value 형식
사용자 정의 환경변수 형태
VUE_APP_변수명
형태로 VUE_APP이 prefix되어야 인식되어 자동 로드합니다.
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 };
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/
npm run serve
개발용 명령어 입력시 endpoint가 .env.development에서 설정한 url 주소인 'http://localhost:3000' 으로 노출되는 것을 확인 할 수 있습니다.
.env 설정값을 변경했는데 적용되지 않습니다.
설정값 변경시 webpack에서 인지하지 못하기 때문에 서버를 껐다가 다시 켜주세요.
Modes and Environment Variables
https://cli.vuejs.org/guide/mode-and-env.html#modes