How to use dotenv with Vue.js : <p>I'm trying to add some environment variables into my vue app.</p>

<p>here is content of my <code>.env</code> file, which is placed on root(outside <code>src</code>):</p>

<pre><code>VUE_APP_GOODREADS_KEY = my_key
</code></pre>

<p>and I added code for dot env on the top of my <code>main.js</code></p>

<pre><code>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'
</code></pre>

<p>I want to use this variable within my store <code>./store/index.js</code></p>

<p>I tried to console.log environment variables within store but no luck:</p>

<pre><code>console.log(process.env)
</code></pre>

<p>But all I'm getting is </p>

<pre><code>NODE_ENV:"development"
</code></pre>

<p>Only related thread I found was <a href="https://stackoverflow.com/questions/39426214/load-environment-variables-into-vue-js">Load environment variables into vue.js</a>, but it only mentions how to use existing variables in the <code>process.env</code>. I want to add environment variables using dotenv. Why this code is not working?</p>
