How to use dotenv with Vue.js

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):

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