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

Question

你好，我正在使用 VueJS 2，我的项目中有多个 .env。我的应用程序有每个公司的 .env select 公司配置（肤色/文件...）

实际上我的所有 .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.

参考资料

Answer 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

Answer 3

powershell解决方案

我正在处理完全相同的问题。公认的解决方案还可以，但它并没有解决公司之间的所有差异。此外，如果您使用 npm，您的脚本可能看起来很糟糕。所以如果你有 powershell，这就是我的建议 - 去掉 .env 文件 :)

你可以在问题中保持你想要的结构。只需将 env 文件转换为 ps1.

/build/company1/ 
    build-dev.ps1
    build-stage.ps1
    build-prod.ps1
    
/build/company2/ 
    build-dev.ps1
    build-stage.ps1
    build-prod.ps1

在其中的每一个中，您都可以完全自定义所有 env 变量，运行构建过程并应用一些高级 post-build 逻辑（例如小心 auto-deploy、发布、与 api 项目,..).

例如 company1\build-stage.ps1 可以是这样的：

# You can pass some arguments to the script
param (
    [string]$appName = "company1"
 )

# Set environment variables for vue pipeline
$env:VUE_APP_ENVIRONMENT = "company1-stage";
$env:NODE_ENV="development";
$env:VUE_APP_NAME=$appName;
$env:VUE_APP_API_BASE_URL="https://company1.stage.mycompany.com"

# Run the vue pipeline build
vue-cli-service build;

# Any additional logic e.g. 
# Copy-Item -Path "./dist" -Destination "my-server/my-app" -Recurse¨

最后一部分很简单 - 只需调用它（手动或从 TeamCity 等集成服务）。或者，你可以把它放在 package.json.

里面

...
"scripts": {
    "build-company1-stage": "@powershell -Command ./build/company1/build-stage.ps1 -appName Company-One",
  }
...

您只需调用

即可调用整个构建过程

npm run build-company1-stage

同样，您可以创建localhost、dev、prod、test等任何环境。让 javascript 处理构建应用程序本身的部分。对于其他高级工作，请使用 poweshell。我认为此解决方案为您提供了更大的配置和构建过程灵活性。

P.S。我知道这样我会合并配置和构建过程，但如果文件变大，您始终可以将配置提取到文件之外。

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

VueJS place multiple .env in folder

environment-variables

vue.js

vue-cli

参考资料