How to use dotenv with Vue.js

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

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

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