VueJS place multiple .env in folder

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