VueJS 在文件夹中放置多个 .env答案

【问题标题】：VueJS place multiple .env in folderVueJS 在文件夹中放置多个 .env
【发布时间】：2021-02-04 04:50:48
【问题描述】：

您好，我正在使用 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

【问题讨论】：

标签： vue.js environment-variables vue-cli

【解决方案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 设置为公司名称并运行您的应用，

注意：将此代码放在vue.config.js 上而不是main.js 上很重要，因为dotenv 将使用fs 来读取文件。

参考文献

【讨论】：

您好，感谢您的回答。如果不使用 dotenv 模块，就没有办法做到这一点？ dotenv 是否会影响 vue cli 构建，或者我可以保留我拥有的内容并添加您的代码？我应该如何处理结果变量？
我认为你甚至不需要安装 dotenv 因为 vue-cli 已经使用它来加载 .env 文件 cli.vuejs.org/guide/mode-and-env.html#environment-variables;有一段说：For more detailed env parsing rules, please refer to the documentation of dotenv
我还根据我用来调试和显示错误的示例和文档进行了编辑以显示结果的使用情况，因为 dotenv 在 try catch 中加载文件
好的，我明白了，但我没有得到这条线envfile += "." + process.env.NODE_ENV; 我只有这个变量的生产，我没有为暂存或其他环境（如演示）初始化。医生说：NODE_ENV - this will be one of "development", "production" or "test" depending on the mode the app is running in.
对于VUE_APP_COMPANY 我必须在 vue cli 命令中设置这个变量？例如：VUE_APP_COMPANY=company1 vue-cli-service serve --mode my-app-dev

【解决方案2】：

我们过去也使用过的公认答案。但我找到了一个更好的解决方案来处理不同的环境。使用 npm 包dotenv-flow 不仅可以使用不同的环境，而且还有更多好处，例如：

使用.env.local或.env.staging.local等对变量进行局部覆盖
使用.env.defaults定义默认值

结合起来，我们使用此配置设置了我们的项目：

.env
.env.defaults
.env.development
.env.production
.env.staging
.env.test

而您在vue.config.js、nuxt.config.js 或其他入口点中唯一需要做的事情是

require('dotenv-flow').config()

参考：https://www.npmjs.com/package/dotenv-flow

【讨论】：

您的解决方案很好，但这不是我的主要问题。我的问题是关于公司的多个 .env 以及如何更改默认路径以获取我的 .env。接受的答案对此作出答复。您的答案是关于您可以在项目中拥有的不同 .env 。我认为这两个答案的混合很酷。