[VUE + TYPESCRIPT] 환경변수 설정

VUE.JS 목록

 

.env

.env.local

.env.development

.env.production

파일을 만듭니다.

 

.env

VUE_APP_ALL=_ALL

 

 

.env.local

VUE_APP_LOCAL=_LOCAL

 

.env.development

VUE_APP_DEV=_DEVELOPMENT

 

 

.env.production

VUE_APP_PRODUCTION=_PRODUCTION

 

package.json

  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "stg": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  ...

 

 

변수 확인

<template>
  <button @click="clicked">변수확인</button>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component()
export default class HomeView extends Vue {
  clicked () {
    console.log(process.env)
  }
}
</script>

 

 

Local 서버구동

$ npm run serve

 

Production 서버구동

$ npm run stg

VUE.JS 목록