Answer a question

Hello I'm using VueJS 2 and I have multiple .env in my project. My app have .env for each company to select the company configuration (skin color / files...)

Actually I have all my .env in the root folder:

.env.company1-dev
.env.company1-staging
.env.company1-prod

.env.company2-dev
.env.company2-staging
.env.company2-prod

.env.company3-dev
.env.company3-staging
.env.company3-prod

So when I'll get 20 companies it will be confused on my root folder so it is possible to create a folder where I can place all my .env ?

The idea :

/environments/company1/ 
    .env.dev
    .env.staging
    .env.prod
    
/environments/company2/ 
    .env.dev
    .env.staging
    .env.prod
    
/environments/company3/ 
    .env.dev
    .env.staging
    .env.prod

Answers

On your vue.config.js file you can add:

const dotenv = require("dotenv");
const path = require("path");

let envfile = ".env";
if (process.env.NODE_ENV) {
    envfile += "." + process.env.NODE_ENV;
}

const result = dotenv.config({ 
    path: path.resolve(`environments/${process.env.VUE_APP_COMPANY}`, envfile)
});

// optional: check for errors
if (result.error) {
    throw result.error;
}

the before run you can set VUE_APP_COMPANY to a company name and run your app,

Note: It's important to put this code on vue.config.js and not in main.js because dotenv will use fs to read files.

References

• https://github.com/motdotla/dotenv#path
• https://github.com/vuejs/vue-cli/issues/787
• https://cli.vuejs.org/guide/mode-and-env.html#environment-variables