Vue에서 .env 환경 변수 사용

Node.js 애플리케이션을 만들 때 모든 환경 변수를 저장하는 파일.env도 만드는 것이 일반적입니다. 이 파일은 일반적으로 비공개이며 API 키, URL 및 한 환경에 특정한 기타 항목을 저장하는 데 사용할 수 있습니다.

Vue.js는 또한 .env 변수를 사용할 수 있지만 약간 다르게 작동합니다. 그럼 Vue에서 .env 변수를 어떻게 사용하는지 알아보겠습니다.

참고: 이 가이드에서는 vue-cli-service가 설치되어 있다고 가정합니다. npm install -g @vue/cli 를 사용하여 프로젝트에 설치할 수 있습니다. Vue CLI( vue-cli-service )는 애플리케이션을 실행할 때 .env를 사용할 수 있는 기능을 제공합니다.

Vue에서 .env 변수 사용

Vue CLI에서 .env는 예상대로 거의 작동합니다. 기본 디렉토리에서 다음과 같이 .env 파일을 만들 수 있습니다.

.env를 사용한 일반적인 Vue 폴더 구조

|- public <-- Our public folder
|- src <-- Our src folder 
|- .env <-- Our .env file

.env 파일 자체에서 .env 변수 정의를 시작할 수 있습니다. Vue CLI는 실제로 .env 파일에 대해 몇 가지 다른 이름을 지원합니다.

.env                # loaded on all projects
.env.local          # loaded on all projects, but ignored by git by default
.env.[mode]         # only loaded in a specific mode
.env.[mode].local   # only loaded in a specific mode, but ignored by git by default

위의 모드 개념이 있음을 알 수 있습니다. Vue CLI의 모드는 사용 중인 환경입니다. 특정 모드에서 Vue 애플리케이션을 빌드하는 가장 쉬운 방법은 다음과 같이 vue-cli-service를 실행하는 것입니다.

vue-cli-service build --mode development

이 명령을 실행하면 .env , .env.local , .env.development , .env.development.local 가 사용 가능하다고 가정하고 Vue에 의해 로드됩니다. 즉, 코드를 구성하는 환경에 따라 사용자 지정.env 파일을 가질 수 있습니다.

뿐만 아니라 Vue CLI에는 test , development 및 production 3가지 표준 발사 방법이 있다는 것을 아는 것이 좋습니다.

vue-cli-service serve     # mode will be 'development'
vue-cli-service test:unit # mode will be 'test'
vue-cli-service build     # mode will be 'production

.env 파일 사용

이제 .env 파일을 만드는 방법과 해당 파일이 어디로 가는지 명확해졌으므로 그 내용을 살펴보겠습니다. 일반적인 Node.js.env와 Vue CLI의 차이점은 Vue가 VUE_APP_ 로 시작하는 변수만 로드한다는 것입니다. 따라서 .env 내용이 다음과 같다면:

VUE_APP_API_KEY = 123-123-123-123
VUE_APP_API_BASE = https://some-app.fjolt.com/api/
topSecretCode = someSecretName

그러면 VUE_APP_API_KEY 및 VUE_APP_API_BASE만 Vue 애플리케이션에서 사용할 수 있습니다. 다른 모든 변수는 무시됩니다. VUE_APP_ 로 시작하는 모든 변수뿐만 아니라 다음에도 액세스할 수 있습니다.

NODE_ENV - --mode가 사용되는 환경.

BASE_URL - publicPath의 vue.config.js 변수에 구성된 URL입니다.

Vue 애플리케이션에서 .env 변수 사용

이제 .env 파일의 내용을 만드는 방법을 알았으므로 파일에서 사용하기가 매우 쉽습니다. .env 를 통해 process.env 파일에서 모든 유효한 변수에 액세스할 수 있습니다. 따라서 코드에서 VUE_APP_API_KEY를 사용하려면 Javascript로 다음과 같이 작성할 수 있습니다.

console.log(process.env.VUE_APP_API_KEY)

기억하세요 - 모든 .env 변수가 작동하려면 앞에 VUE_APP_가 필요합니다. 따라서 무언가가 실행되고 있지 않은 것 같으면 다시 확인하십시오.

결론

.env 파일은 환경별로 애플리케이션에 대한 데이터를 저장하는 좋은 방법이며 Vue CLI와 같은 도구를 사용하면 매우 간단합니다. Vue에서 .env에 대한 이 가이드를 즐겼기를 바랍니다. If you want more Vue content, check out all my articles here .