如果你使用的是mac/linux，你想检索你正在使用的机器的本地参数，这是你要做的:

在终端运行nano ~/.bash_profile 添加如下一行:export MY_VAR=var 保存并运行source ~/.bash_profile 在节点中使用console.log(process.env.MY_VAR);

使用dotenv-webpack让您的生活更轻松。简单地安装它npm install dotenv-webpack——save-dev，然后在你的应用程序的根目录下创建一个。env文件(记得在你推送git之前把它添加到。gitignore中)。打开这个文件，设置一些环境变量，例如:

ENV_VAR_1=1234
ENV_VAR_2=abcd
ENV_VAR_3=1234abcd

现在，在你的webpack配置中添加:

const Dotenv = require('dotenv-webpack');
const webpackConfig = {
  node: { global: true, fs: 'empty' }, // Fix: "Uncaught ReferenceError: global is not defined", and "Can't resolve 'fs'".
  output: {
    libraryTarget: 'umd' // Fix: "Uncaught ReferenceError: exports is not defined".
  },
  plugins: [new Dotenv()]
};
module.exports = webpackConfig; // Export all custom Webpack configs.

只有const Dotenv = require(' Dotenv -webpack');，插件:[new Dotenv()]，当然还有模块。出口= webpackConfig;//导出所有Webpack配置。是必需的。然而，在某些情况下，您可能会得到一些错误。对于这些问题，你也有解决方案，这意味着你可以修复某些错误。

现在，你可以在任何地方使用process.env。ENV_VAR_1 process.env。ENV_VAR_2 process.env。应用程序中的ENV_VAR_3。

windows用户:小心!建议在Unix系统下使用这些命令。但在Windows上，它们不会持续存在，它们只在当前shell中设置了一个变量，当你重新启动时，它就会消失。

SET TEST="hello world" $env:TEST = "hello world"

Windows下设置持久环境变量的3种方法:

A) .env文件在你的项目-最好的方法。因为你可以将该文件复制到任何计算机，并在运行项目时获得相同的配置。

在你的项目根目录下创建一个。env文件，内容如下:TEST="hello world" 编写一些将读取该文件的节点代码。我建议安装dotenv (npm install dotenv——save)，然后添加require('dotenv').config();在节点设置代码期间。 process.env.TEST现在在node中可用

env文件是将api-key排除在代码库之外的一种好方法

B)使用Powershell -这将创建一个变量，可在其他终端访问。但这很糟糕，因为重启电脑后它就会丢失。

[Environment]::SetEnvironmentVariable("TEST"， "hello world"， "User")

这种方法在Windows论坛上被广泛推荐，人们似乎没有意识到在系统重新启动后它不会持续....

C)使用Windows GUI

在开始菜单中搜索“环境变量”或在控制面板中选择“编辑系统环境变量”。打开一个对话框，点击对话框底部的“环境变量”按钮，打开一个编辑视图，点击“新建”按钮，添加一个新的环境变量。一件容易的事。并且即使在重新启动后仍然存在。但您不应该使用它来配置特定的代码库。

我成功使用过的处理环境变量的好方法如下:

A.使用不同的配置文件:

Dev.js //这里只包含所有用于开发的环境变量 该文件包含: 模块。出口= { ENV:“开发”, someEnvKey1: '一些DEV Value1'， someEnvKey2: 'some DEV Value2' }; js //只包含所有用于开发的环境变量 ．． qa.js //这里只包含qa测试的所有环境变量 该文件包含: 模块。出口= { ENV:“开发”, someEnvKey1: '一些QA Value1'， someEnvKey2: '一些QA Value2' };

注意:大多数情况下，值会随着环境的变化而变化，但键保持不变。

你可以有更多 Z__prod.js //只包含生产/活动的所有环境变量 注意:此文件从未捆绑用于部署 将所有这些配置文件放在/config/文件夹中 < projectRoot > / config / dev.js < projectRoot > / config / qa.js < projectRoot > / config / z__prod.js < projectRoot > / setenv.js < projectRoot > / setenv.bat < projectRoot > / setenv.sh

注意:prod的名称与其他名称不同，因为它不会被所有人使用。

B.从配置文件中设置OS/ Lambda/ AzureFunction/ GoogleCloudFunction环境变量

理想情况下，文件中的这些配置变量应该作为OS环境变量(或LAMBDA函数变量，或Azure函数变量，谷歌云函数等)。

因此，我们在Windows操作系统(或其他)中编写自动化

假设我们编写“setenv”bat文件，其中一个参数是我们想要设置的环境 现在运行"setenv dev"

a)从传入的参数变量(现在是'dev')获取输入 B)读取相应的文件('config\dev.js') c)设置Windows操作系统(或其他)中的环境变量

例如,

setenv.bat的内容可能是:

    node setenv.js

setenv.js的内容可能是:

    // import "process.env.ENV".js file (dev.js example)
    // loop the imported file contents
    //     set the environment variables in Windows OS (or, Lambda, etc.)

至此，您的环境就可以使用了。

当你执行“setenv qa”时，所有的qa环境变量都可以从qa.js中使用，并且可以由相同的程序(总是要求process.env. qa)使用。someEnvKey1，但它得到的值是qone)。

希望这能有所帮助。

创建一个名为local-env的文件，并用变量填充它

PORT=80
DB_NAME=foo
SOME_URL=example.com

现在这样运行node:

source ./local_env ; node index.js

步骤1:将环境变量添加到相应的文件中。例如，您的登台环境可以称为.env。其中包含特定于登台环境的环境变量USER_ID和USER_KEY。

第二步:包装。Json文件，添加以下内容:

"scripts": {
  "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
  "build:staging": "REACT_APP_ENV=staging npm run build",
  "build:production": "REACT_APP_ENV=production npm run build",
  ...
}

然后在部署脚本中像这样调用它:

npm run build:staging

超级简单的设置和工作就像一个魅力!

来源:https://medium.com/@tacomanator environments-with-create-react-app-7b645312c09d