Using .env (dotenv) files in Nuxt.js

How to use dotenv / .env files in Nuxt.js?

My approach, which is the following one, doesn't work.

I have two different env files with different constants inside: BASE_URL=localhost:1337 and BASE_URL=https://my-app.heroku.com". The files path / names are:

root_project/.env
root_project/.env.production

In nuxt.config.js I have tried both runtime config and also env:

publicRuntimeConfig: {
  BASE_URL: process.env.BASE_URL,
},

env: {
  BASE_URL: process.env.BASE_URL,
},

Then inside e.g. default/index.vue or pages/index.vue I verify it with:

created() {
  console.log('env', process.env.NODE_ENV)
  console.log('baseUrl', this.$config.BASE_URL)
}

Build (npm run build) and start (NODE_ENV=production npm run start) shows:

env production 
baseUrl localhost:1337

Why are the values from .env.production not read??