Vue.js에서 환경 변수를 사용하는 방법

소개

웹 앱에서는 URL을 통해 백엔드 API 서버에 액세스해야 할 가능성이 높습니다. 개발 환경에서 - 로컬에서 작업하는 경우 이 URL은 http://localhost:8080/api와 같을 수 있습니다. 프로덕션 환경에서 - 프로젝트가 배포된 경우 이 URL은 https://example.com/api와 같을 수 있습니다. 환경 변수를 사용하면 프로젝트의 현재 상태에 따라 이 URL을 자동으로 변경할 수 있습니다.

Vue.js를 사용하면 파일 확장자가 .env인 파일을 통해 환경 변수를 사용할 수 있습니다. 이러한 파일은 환경("개발\, "테스트\, "생산\ 등)에 특정한 정보를 저장하는 역할을 합니다.

이 기사에서는 Vue CLI 3+ 및 2를 사용하여 Vue.js 프로젝트의 개발 모드와 프로덕션 모드 간에 고유한 구성으로 작업하는 방법을 배웁니다.

전제 조건

이 문서를 따라 하려면 다음이 필요합니다.

Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
Vue.js 프로젝트 설정에 대한 약간의 지식.

이 튜토리얼은 Node v15.1.0, npm v6.14.8, Vue.js v2.6.12, TypeScript v3.9.3, @vue/cli v4.5.8 및 vue-cli v2.9.6.

1단계 — Vue CLI 3+에서 .env 파일 사용

Vue CLI 4는 @vue/cli의 현재 버전입니다. Vue.js 프로젝트를 생성하면 .env 및 .env.production 파일을 추가할 수 있습니다.

터미널에서 @vue/cli로 새 Vue.js 프로젝트를 만듭니다.

npx @vue/cli create vue-cli-env-example

프로젝트 디렉토리로 이동합니다.

cd vue-cli-env-example

코드 편집기를 사용하여 .env 파일을 만들고 다음과 같은 값을 추가합니다.

VUE_APP_ROOT_API=http://localhost/api

그런 다음 코드 편집기를 사용하여 .env.production 파일을 만들고 다음과 같은 값을 추가합니다.

VUE_APP_ROOT_API=http://www.example.com/api

참고: 여기서 VUE_APP_ 접두사는 중요하며 해당 접두사가 없는 변수는 앱에서 사용할 수 없습니다.

VUE_APP_ROOT_API 변수를 생성한 후 전역 process.env 개체를 통해 Vue의 모든 위치에서 사용할 수 있습니다.

process.env.VUE_APP_ROOT_API

예를 들어 HelloWorld.vue 파일을 열고 <script> 태그에 다음을 추가합니다.

<code><script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    console.log(process.env.VUE_APP_ROOT_API)
  },
}
</script>

개발 값으로 애플리케이션을 컴파일하는 경우:

npm run serve

이 명령은 .env 값을 사용하고 콘솔 로그에 http://localhost/api가 표시됩니다.

프로덕션 값으로 애플리케이션을 컴파일하는 경우:

npm run serve -- --mode=production

참고: npm에서 vue-cli-service로 플래그를 전달하려면 이중 하이픈을 사용하는 것이 중요합니다.

이 대체 명령을 사용할 수도 있습니다.

vue-cli-service serve --mode=production

이 명령은 .env.production 값을 사용하고 콘솔 로그에 http://www.example.com/api가 표시됩니다.

기본적으로 Vue CLI는 "개발\, \테스트\ 및 "생산\의 세 가지 모드를 지원합니다. Vue CLI 3에서 환경 변수를 사용하는 방법에 대한 자세한 내용은 공식 문서를 참조하세요.

2단계 — Vue CLI 2에서 .env 파일 사용

Vue CLI 2는 vue-cli의 이전 버전입니다. Vue.js 프로젝트를 생성하면 다음을 사용할 수 있습니다.

터미널에서 vue-cli로 새 Vue.js 프로젝트를 만듭니다.

npx vue-cli init webpack vue-cli-two-env-example

config 디렉토리에는 dev.env.js 및 prod.env.js라는 두 개의 파일이 있습니다.

이러한 파일은 개발 및 프로덕션 모드에서 사용됩니다. npm run dev 명령을 통해 애플리케이션을 실행하는 경우 dev.env.js 파일이 사용됩니다. npm run build 명령으로 프로덕션용으로 프로젝트를 컴파일하면 prod.env.js 파일이 대신 사용됩니다.

코드 편집기에서 dev.env.js를 열고 ROOT_API 값을 추가합니다.

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ROOT_API: '"http://localhost/api"'
})

그런 다음 코드 편집기에서 prod.env.js를 열고 ROOT_API 값을 추가합니다.

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ROOT_API: '"http://www.example.com/api"'
}

ROOT_API 변수를 생성한 후 전역 process.env 개체를 통해 Vue의 어디에서나 사용할 수 있습니다.

process.env.ROOT_API

예를 들어 HelloWorld.vue 파일을 열고 <script> 태그에 다음을 추가합니다.

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    console.log(process.env.ROOT_API)
  },
}
</script>

다음을 사용하여 애플리케이션을 컴파일하는 경우:

npm run dev

이 명령은 dev.env.js 값을 사용하고 콘솔 로그에 http://localhost/api가 표시됩니다.

다음을 사용하여 애플리케이션을 컴파일하는 경우:

npm run build

이 명령은 prod.env.js 값을 사용하고 dist 디렉토리에 애플리케이션을 생성합니다. 이 디렉터리로 이동하여 process.env.ROOT_API 값이 http://localhost 대신 http://www.example.com/api를 사용하는지 확인합니다. /api.

dotenv가 환경 변수를 관리하는 미리 만들어진 구성을 사용하여 서로 다른 환경마다 서로 다른 변수로 작업할 수 있습니다.

결론

이 기사에서는 Vue CLI 3+ 및 2로 빌드된 프로젝트에서 환경 변수를 사용하는 방법을 배웠습니다.

현재 및 향후 프로젝트의 경우 vue-cli가 더 이상 사용되지 않으므로 앞으로 @vue/cli를 사용하는 것이 좋습니다.

Vue.js에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Vue.js 주제 페이지를 확인하세요.