Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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?
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:
Placing the .env file in your project root.
In the .env file, specifying environment variables with "VUE_APP_" prefix.
VUE_APP_SOMEKEY=SOME_KEY_VALUE.
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
                @PrestonDocks Vue CLI 3 !== Vue Js 3, Vue CLI 3 generates Vue Js 2.x code, VueJS 3 is the next version of vue that's not out yet.
– Nick Bolles
                Dec 9, 2019 at 5:09
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"
                Vue CLI 3 !== Vue Js 3, Vue CLI 3 generates Vue Js 2.x code, VueJS 3 is the next version of vue that's not out yet.
– Nick Bolles
                Dec 9, 2019 at 5:11
const config = dotenv.config()
if(config.error){
  console.log('Could not load env file', config.error)
Reference: https://github.com/motdotla/dotenv#config
                Well, that is expected. How can a browser read an arbitrary file on your server? fs is a node builtin. However, you can setup a route which serves the config as a JSON string, so the browser can fetch and parse that
– Tudor Ilisoi
                Jun 7, 2018 at 13:16
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.