using different env for different cases in nuxt

Question

I am new to Nuxt or any sort of node stuff.I m trying to create different environment for different cases, e.g. If I want to test my app, I want the block of dev object to run (pointing to dev endpoint) etc, following is a example

[
 prod: {
   server: www.mysite.com,
   api: 'www.jsonplaceholder.com/'
  },
 dev: {
   server: www.internal-mysite.com,
   api: 'www.jsonplaceholder.com/'
  }
]

so when I do npm run dev, it run the app with those endpoints I know that .env won't allowed objects or array so I cannot use that .I have tried dotenv but not much help I can get out of it, I tried watching this but I cannot pass NODE_ENV=config.dev (given that config is a file containing the object) How can I make my app to work like that?

A detailed answered would be helpful.

Answer 1

I answered the same question here

[How to set custom path for dotenv in nuxt] https://stackoverflow.com/a/71346654/10537000

If you are using version > 2.13 then you won't need to install dotenv anymore because it's already built in https://nuxtjs.org/docs/directory-structure/nuxt-config/#runtimeconfig

.env support Similar to vue-cli (*), .env file will be always loaded via dotenv and is accessible via process.env and options._env. process.env is updated so one can use it right inside nuxt.config for runtime config. Values are interpolated and expanded with an improved version of dotenv-expand. .env file is also watched to reload during nuxt dev. Path can be set via cli --dotenv or disabled by --dotenv false.

I created the .env.xxx files and created the corresponding scripts

Answer 2

Create two separate config files and import them with condition and use inside nuxt config as follows

const CONFIG = process.env.NODE_ENV === 'development' ? require('dev-config') : require('prod-config');

module.exports = {
  axios: {
    baseURL: CONFIG.API_BASE
  }
}