如何在 Vue.js 中使用 dotenv

Question

I'm trying to add some environment variables into my vue app.

here is content of my .env file, which is placed on root(outside src ):

VUE_APP_GOODREADS_KEY = my_key

and I added code for dot env on the top of my 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'

I want to use this variable within my store ./store/index.js

I tried to console.log environment variables within store but no luck:

console.log(process.env)

But all I'm getting is

NODE_ENV:"development"

Only related thread I found was Load environment variables into vue.js , but it only mentions how to use existing variables in the process.env . I want to add environment variables using dotenv. Why this code is not working?

Answer 1

If your project was create by using Vue CLI 3 , no need to use dotenv to get environment variables.

To get environment variables within .env file in your project:

1. Placing the .env file in your project root.

2. In the .env file, specifying environment variables with "VUE_APP_" prefix.

   VUE_APP_SOMEKEY=SOME_KEY_VALUE .

3. Finally, you can access them with process.env.* in your application code.

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

Referance: Vue CLI 3 - Environment Variables and Modes

Answer 2

When using Vue CLI 2, you have to use the dev.env.js and prod.env.js files located in the config folder.

Vue CLI 2 does not support the use of .env files, however Vue CLI 3 does .

// /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"
}

Answer 3

Try removing the spaces around the equal sign.

VUE_APP_GOODREADS_KEY=my_key

Also, try debugging like this:

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

Reference: https://github.com/motdotla/dotenv#config