如何优雅的在项目中设置多个环境变量

总所周知项目完成以后代码都会统一打包上线，有些时候我们需要同时上线不同环境，对于不同的环境我们所展示页面、功能有时会有很大变化，那么我们如何应对这样的变化呢？

问题

我发现有些琐碎的事情有些琐碎并且很难做，而在Web应用程序内部却是如此。这些事情之一是处理不同的环境变量。

当您仍在开发应用程序时，通常只有一个环境是正常的，但是当其他一些用户开始对其进行测试或要发布它时，您可能希望对API使用不同的URL，例如该API的开发版本。可以访问新端点或更全面的记录器以及生产就绪版本的API，这些API经过了良好的测试，并具有发行版本的生产数据库。
有时您需要两个以上的环境，例如：

• 开发：这是您开发应用程序所有新功能的地方；该环境已准备就绪，可以帮助您获得更好的日志和伪造的数据库，如果您花费很多，可以随时删除并重新创建它们；
• 生产版：这是您将发布到线上的版本

那么如何为不同的环境存储（和使用）不同的变量呢？

显然，我尝试向Google寻求答案，但是我发现的解决方案似乎太困难或不够灵活。

使用.env

就是这个文件,在文件中可以定义我们需要的配置，然后在项目中使用process.env全局变量获取，声明的属性在 vue以及react中都有特殊的命名要求，比如vue中属性名必须以VUE\_APP\_开头，如VUE\_APP\_XXX，react则需要以REACT_APP开头。
不幸的是，似乎最多只能处理两种环境（一种开发和一种发行/生产），并且还具有一些可怕的变量缓存。

更简单的解决方案

参照后端配置打包profile的方式。
这是我目前正在使用的方法；准备手指，因为您将需要创建一些新文件。

首先，我们将所有环境存储在envs文件夹中的JSON文件中。
我将为本文创建3个环境（开发，暂存和生产），每个环境将具有不同的API\_URL。显然，您可以根据需要添加任意多个变量！

envs/development.json

{   
    "API\_URL": "https://development.api.com",
}

envs/staging.json

{   
    "API\_URL": "https://staging.api.com",  
}

envs/production.json

{   
    "API\_URL": "https://production.api.com", 
}

现在，我们将创建一个节点脚本，该脚本将在每次我们想要切换环境时更改环境文件。

我将其放在脚本文件夹中（在该文件夹中，我还有其他脚本可以自动执行构建过程的其他部分）

脚本/set-environment.js

＃！/ bin/node
const fs = require（"fs");//获取传递给节点脚本的环境字符串  

const environment = process.argv[2] //读取json文件的内容  
const envFileContent = require(`../envs/$ {environment} .json`); //将env.json文件内的json复制到  
fs.writeFileSync("env.json", JSON.stringify(envFileContent, undefined, 2));

此设置enviroment.js首先，它在一个变量中存储的第一个参数，当你调用脚本，那么它将require里面的文件ENVS具有相同的名称，最后将创建一个env.json文件包含envFileContent内容的根文件夹。

现在我们可以尝试并调用

node scripts/set-environment.js开发

✨MAGIC✨…一个新的env.json文件在正确的位置，可以为您的所有变量提供服务。

另外，您可以在package.json文件中设置一些脚本，以切换环境而无需在终端中键入所有单词：只需键入yarn env：dev即可。

{   
    "name": "您的应用程序名称",
    "scripts": {   
    "start": "start"，
    "env: staging"："node scripts/set-environment.js staging",
    "env: dev”："node scripts/set-environment.js dev",
    "env: prod"："node scripts/set-environment.js prod,
    "oduction",...   
 },
 "dependencies"：{...},
 ...   
}

启动的时候先根据需要启动对应的env命令(npm run env: staging) 然后在启动npm run start命令启动项目， 也可以使用concurrently进行启动命令合并。

如何在代码中使用新的.env文件

现在，您只需要从src/env.json文件导入变量，就可以开始了！🚀

如何自动执行环境切换

现在，我们需要一种自动切换环境的方法。

如果我们在package.json建一些新脚本，这几乎是免费的

后期我们也可以打包出来的文件(src/env.json)统一放置到一个文件下只需要修改/set-environment.js文件中fs的写入路径即可。