Vue CLI 3에서 custom dotenv 활용하는 방법

Vue CLI에서 커스텀 dotenv는 변수명 앞에 VUE_APP_ 접두사를 추가해야 사용이 가능합니다.
ex) process.env.NODE_ENV

// ex) process.env.NODE_ENV

 

localhost | dev 서버에는 dev rest를 반영하고, release 서버에는 prod rest를 반영하는 조금 신박한 방법

(기존방식 process.env.NODE_ENV === 'development' 로 체크하면 dev서버에 올릴 때 release API URL로 정의되어 올라감)

package.json 스크립트에서 dev, prod env를 생성하고 각 env파일에 VUE_APP_API_BASE_URL 변수에 url 추가

// .env.dev
VUE_APP_API_BASE_URL=https://my.dev.api.example.com/dev

// .env.prod
VUE_APP_API_BASE_URL=https://my.release.api.example.com/prod

// package.json
{
	"scripts": {
      "start": "cp ./.env.dev ./.env && vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint",
      "deploy": "cp ./.env.dev ./.env && yarn build && aws s3 sync ./dist s3://dev.mys3bucket.com",
      "deploy:prod": "cp ./.env.prod ./.env && yarn build && aws s3 sync ./dist s3://prod.mys3bucket.com"    
    }
}

스크립트 실행할 때 필요한 .env파일을 복사해서 반영합니다 (start, deploy 스크립트는 로컬, dev서버, deploy:prod 스크립트는 release)

Vue와 연관된 글 중에 이런 글은 어때요?

Vue CLI 3에서 custom dotenv 활용하는 방법

vue.js Event Bus를 통해 컴포넌트간 통신하기 (Event Bus in Vue.js)

Nuxt.js x Contentful x Netlify로 static blog 개발하기 1강

Nuxt.js x Contentful x Netlify로 static blog 개발하기 2강

Nuxt.js x Contentful x Netlify로 static blog 개발하기 3강

Nuxt 301 Redirect 처리하는 방법 (Handling Redirects in Nuxt.js)