How to use dotenv with Vue.js

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

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

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

Related