vue.js - VueJS 在文件夹中放置多个 .env

Question

您好，我正在使用 VueJS 2，我的项目中有多个 .env。
我的应用程序为每个公司提供 .env 以选择公司配置(肤色/文件...)
实际上，我的所有 .env 文件都在根文件夹中:

.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

因此，当我获得 20 家公司时，它会在我的根文件夹中感到困惑，因此可以创建一个文件夹来放置我所有的 .env 吗？
想法:

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

Answer 1

在您的 vue.config.js您可以添加的文件:

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;
}

运行前可以设置 VUE_APP_COMPANY到公司名称并运行您的应用程序，

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.

引用

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