Vue - 환경변수 파일을 이용한 옵션 설정

env 파일

.env 라는 환경변수 파일로 옵션을 바꿀 수 있다.

 

1. .env.development 파일

- root 디렉토리에 환경변수를 설정할 파일을 만든다.

- 사용할 변수를 작성 후 package.json에 추가

// env 파일
VUE_APP_API="http://jsonplaceholder.typicode.com/"

// package.json 파일

"scripts": {
    "serve": "vue-cli-service serve --mode local",
    // 작성한 .env 파일을 사용하도록 --mode development 추가
    "dev": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

 

2. .env 파일에 작성한 환경변수 사용

- 아래 소스를 보면 baseURL 변수에 .env파일에서 선언한 환경변수를 사용한다.

- axios 통신을할 때 도메인 url을 로컬, 개발서버, 알파서버, 운영서버 등 다른 도메인을 사용하기 때문에 .env파일로 환경변수를 설정하여

  사용한다.

import axios from 'axios';
import setInterceptors from './Interceptors'

// 인증이 필요없는 통신시 사용할 파일에서 import 하여 사용
function createInstance() {
	const instance = axios.create({
    // .env 파일에 작성한 환경변수로 baseURL 설정
    baseURL: process.env.VUE_APP_API
  });
	return instance;
}
export const instance = createInstance();