How to create environment variables for multiple hosts in Nuxt.js?

Question

I am building a Vue.js / Nuxt.js web app. The app will be used for multiple different projects. I would like to have a global config file which holds project specific information like for example the title of the page or the value of a button etc.

I know that you can define environment variables in nuxt.config.js however I don't know how to define them for multiple projects and how to do distinguish between the projects. I also tried out with dotenv but I can't figure out how to define variables for multiple projects and distinguish them for example by host name without creating multiple .env files ( .env.test , .env.staging ...)

I need a way to define env variables for the following environments:

Project A

1. Testing environment (local)
2. Staging environment
3. Live environment

Project B

1. Testing environment (local)
2. Staging environment
3. Live environment

Project C

1. Testing environment (local)
2. Staging environment
3. Live environment

Answer 1

My initial idea to put project specific information into environment variables was actually pretty bad. You shouldn't be littering the environment with variables like a page title etc. Instead my approach now is to create a "config" file and add different variables for the different projects. Something like:

const configProd = { FOO: 'bar', BAR: 'foo' };
const configStaging = { FOO: 'foo', BAR: 'bar' };

const portalConfig = process.env.NODE_ENV === 'production' ? configProd : configStaging;

export const portalConfig;

Then wherever you want to use a config variable you simply import the config file.