总所周知我的项目实现当前代码都会对立打包上线，有些时候咱们须要同时上线不同环境，对于不同的环境咱们所展现页面、性能有时会有很大变动，那么咱们如何应答这样的变动呢？

问题

我发现有些琐碎的事件有些琐碎并且很难做，而在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/nodeconst 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内容的根文件夹。

当初咱们能够尝试并调用

节点脚本/set-environment.js开发

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

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

{       "name": "您的应用程序名称",    "scripts": {       "start": "本机开始"，    "env: staging"："节点脚本/set-environment.js阶段",    "env: dev”："节点脚本/set-environment.js 开发",    "env: prod"："节点脚本/set-environment.js,    "oduction",...    }, "依赖项"：{...}, ...   }

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

当初，您只须要从src/env.json文件导入变量，就能够开始了！????

如何主动执行环境切换

当初，咱们须要一种主动切换环境的办法。

如果咱们在pckage.json建一些新脚本，这简直是收费的

{  "name": "your-app-name",  "scripts": {    "start": "react-native start",    "env:staging": "node scripts/set-environment.js staging",    "env:dev": "node scripts/set-environment.js development",    "env:prod": "node scripts/set-environment.js production",    "_ios": "react-native run-ios",    "ios": "yarn env:dev && yarn _ios",    "ios:staging": "yarn env:staging && yarn _ios",    "ios:prod": "yarn env:prod && yarn _ios",        "_build:ios": "react-native bundle --platform ios ...",    "build:ios": "yarn env:dev && yarn _build:ios",    "build:ios:staging": "yarn env:staging && yarn _build:ios",    "build:ios:prod": "yarn env:prod && yarn _build:ios",  },  "dependencies": {...},  ...}

前期咱们也能够打包进去的文件(src/env.json)对立搁置到一个文件下只须要批改/set-environment.js文件中fs的写入门路即可。