Vue js cli3 환경 변수 만들기(배포 환경 별로 변수 값 변경)

Vue js 환경 변수 만들기 (배포 환경 별로 변수 값 변경)

Vue Cli3 에서 환경 변수 적용 방법을 정리 합니다.

참조 : https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

위와 같이 파일을 만들어 주면 Root 폴더에 만들어 주면 사용 가능하다고 합니다.

여기서 mode 는

vue-cli-service serve --mode development

이렇게 --mode 뒤에 붙는 부분 입니다.

.env.local 은 git 에서 무시 하게 됩니다,

development  부분은

여기에서 모드를 설정 할수 입니다,

server 는 개발 모드 이고

밑에 Build 는 production 모드 입니다.

그럼 파일을 .env.production 으로 만들어 주면 됩니다,

여기서 중요한 점은 Root 폴더 즉 프로젝트 최상위 폴더에 해당 파일이 있어야 합니다.

위와 같이 만들고

여기서 변수를 만들겠습니다.

.env.development 파일에서

VUE_APP_TEST=devlopment env

위와 같이 하고

.env.production 파일에서

VUE_APP_TEST=production env

같이 변수를 만든는데

중요한 점이 있습니다

반드시 변수명 앞에

VUE_APP_  가 붙어야 합니다.

그렇지 않으면 인식이 안됩니다.

<script>

export default {

data(){

return {

}

},

mounted(){

console.log(process.env)

},

components: {

}

}

</script>

위와 같이 로그 찍어 주면

위와 같이 사용 가능 합니다.