Vue.js와 함께 dotenv를 사용하는 방법

Vue.js와 함께 dotenv를 사용하는 방법

내 vue 앱에 환경 변수를 추가하려고 해.

여기 나의 내용이 있다..env루트에 위치하는 파일(기본값)src):

VUE_APP_GOODREADS_KEY = my_key

그리고 위에 도트 엔비(dot envi)main.js

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import Vuetify from 'vuetify'

import dotenv from 'dotenv'

dotenv.config()

import { router } from './router'
import store from './store'

내 스토어 내에서 이 변수를 사용하려는 경우./store/index.js

저장소에 있는 환경 변수를 콘솔로 설정하려고 했지만 운이 따르지 않았다.

console.log(process.env)

하지만 내가 얻는 건

NODE_ENV:"development"

내가 찾은 관련 스레드만 vue.js에 환경 변수를 로드하는 것이었지만, 기존 변수를 사용하는 방법만 언급하고 있다.process.env. dotenv를 사용해서 환경변수를 추가하고 싶다.왜 이 코드가 작동하지 않는 거지?

다음을 사용하여 프로젝트를 생성한 경우Vue CLI 3, 사용할 필요 없음dotenv환경변수를 얻기 위해서.

환경 변수를 가져오려면 다음과 같이 하십시오..env프로젝트를 파일로 저장:

1. 배치하기.env프로젝트 루트에 파일을 저장하십시오.

2. 에서.env파일, "VUE_APP_" 접두사로 환경 변수 지정.

   VUE_APP_SOMEKEY=SOME_KEY_VALUE.

3. 마지막으로, 다음 웹 사이트를 통해process.env.*응용 프로그램 코드에서.

   console.log(process.env.VUE_APP_SOMEKEY) // SOME_KEY_VALUE

참조:Vue CLI 3 - 환경 변수 및 모드

Vue CLI 2를 사용할 때는 config 폴더에 있는 dev.env.js 및 prod.env.js 파일을 사용해야 한다.

Vue CLI 2는 .env 파일 사용을 지원하지 않지만 Vue CLI 3은 .env 파일 사용을 지원하지 않는다.

// /config/prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  SERVER_URI: "http://someremoteuri:3333/api/v1"
}

// /config/dev.env.js
'use strict'
module.exports = {
  NODE_ENV: '"development"',
  SERVER_URI: "http://localhost:3333/api/v1"
}

등호 주위에 있는 공백을 제거해 보십시오.

VUE_APP_GOODREADS_KEY=my_key

또한 다음과 같이 디버깅해 보십시오.

const config = dotenv.config()
if(config.error){
  console.log('Could not load env file', config.error)
}

참조: https://github.com/motdotla/dotenv#config

참조URL: https://stackoverflow.com/questions/50715302/how-to-use-dotenv-with-vue-js