How to load base url axios from env in nuxt js

Question

So first of all, I have 2 env file,

env.dev

BASE_URL=xxxx

.env

BASE_URL=xxxx

I tried to load BASE_URL from my env file, so I use nuxt/dotenv to load env file on nuxt.config.js, like this,

buildModules: [
  '@nuxtjs/eslint-module',
  ['@nuxtjs/dotenv', { filename: '.env' + process.env.ENV }]
],
modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth',
  '@nuxtjs/dotenv'
],
axios: {
  baseURL: process.env.BASE_URL,
  redirectError: {
    401: '/login',
    403: '/login',
    404: '/notfound'
  }
}

But when I try to hit API login, it's always pointing to BASE_URL on .env.
What am I do wrong?

Answer 1

Here I wrote a quick answer on how to user env variables: https://stackoverflow.com/a/67705541/8816585

Here is an answer on how to use a specific .env.dev file: https://github.com/nuxt-community/dotenv-module/issues/59#issuecomment-660646526

yarn add -D @nuxtjs/dotenv

In nuxt.config.js

modules: ['@nuxtjs/dotenv'],
...
buildModules: [
  ['@nuxtjs/dotenv', 
    { filename: '.env.' + process.env.ENV }
  ]
],

In package.json (your probably missed this one)

"scripts": { "dev": "ENV=dev nuxt" }

And finally, do not forget to add them all to your .gitignore file.

Meanwhile, this way of working is not the recommended way as stated in the official dotenv project: https://github.com/motdotla/dotenv#should-i-have-multiple-env-files