四个步骤

NPM安装dotenv 接下来，添加以下行到您的应用程序。 要求(' dotenv ') . config () 然后在应用程序的根目录下创建一个.env文件，并将变量添加到其中。

// contents of .env

REACT_APP_API_KEY = 'my-secret-api-key'

最后，将.env添加到你的.gitignore文件中，这样Git就会忽略它，它永远不会出现在GitHub上。

如果你正在使用Create React App (Create - React - App)，那么你只需要第3步和第4步，但请记住，变量需要以REACT_APP_开始才能工作。

参考:添加自定义环境变量

注意-在.env文件中添加变量后，需要重新启动应用程序。

参考:使用dotenv包创建环境变量

现在有一种更简单的方法。

只需创建.env。在根目录中的本地文件，并在那里设置变量。在你的情况下:

REACT_APP_API_KEY = 'my-secret-api-key'

然后在JavaScript文件中以如下方式调用它:

process.env.REACT_APP_API_KEY

React从react-scripts@0.5.0开始支持环境变量。你不需要一个外部包来做到这一点。

在.env中添加开发环境变量

*注:我建议使用。env。Local而不是.env，因为create-react-app在创建项目时将此文件添加到gitignore。

文件的优先级:

npm start: .env.development.local， .env.development， .envlocal /, .env

NPM运行build: . environment .production。地方,.env。生产、.env。地方、.env

NPM测试:.env.test。地方,.env。Test， .env(注意。env。本地不见了)

更多信息:添加自定义环境变量

Webpack用户

如果你正在使用Webpack，你可以安装和使用dotenv-webpack插件。要做到这一点，请遵循以下步骤:

安装包

yarn add dotenv-webpack

创建一个.env文件

// .env
API_KEY='my secret api key'

将它添加到webpack.config.js文件中:

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

在代码中使用它

process.env.API_KEY

有关更多信息和配置信息，请访问dotenv-webpack。

该解决方案不需要任何额外的包。

步骤1 ReactDocs

在上面的文档中，他们提到了在Shell中导出和其他选项，而我将尝试解释的是使用.env文件

1.1创建Root/.env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

重要提示:它必须以REACT_APP_开头。

1.2访问ENV变量

# App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3构建环境问题

在我执行步骤1.1|2后，它不起作用，但随后我发现了上述问题/解决方案。React在构建时读取/创建env，因此每次修改.env文件时都需要运行npm run start，以便更新变量。

你必须安装npm install env-cmd

在根目录中创建.env并像这样更新& REACT_APP_是变量名的强制前缀。

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

更新package.json

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Install dotenv as devDependencies: npm i --save-dev dotenv Create a .env file in the root directory: my-react-app/ |- node-modules/ |- public/ |- src/ |- .env |- .gitignore |- package.json |- package.lock.json. |- README.md Update the .env file like below & REACT_APP_ is the compulsory prefix for the variable name. REACT_APP_BASE_URL=http://localhost:8000 REACT_APP_API_KEY=YOUR-API-KEY [ Optional but Good Practice ] Now you can create a configuration file to store the variables and export the variable so can use it from others file. For example, I've create a file named base.js and update it like below: export const BASE_URL = process.env.REACT_APP_BASE_URL; export const API_KEY = process.env.REACT_APP_API_KEY; Or you can simply just call the environment variable in your JS file in the following way: process.env.REACT_APP_BASE_URL

1. 在根文件夹上创建.env文件

有些源代码更喜欢使用.env.development和.env。生产，但这不是强制性的。

2. 变量的名称必须以REACT_APP_YOURVARIABLENAME开头

似乎如果您的环境变量不是这样开始的，您就会遇到问题。

3.包括你的变量

要包含环境变量，只需输入process.env。代码中的REACT_APP_VARIABLE。

您不必安装任何外部依赖项

如果你得到的值是未定义的，那么你应该考虑重新启动Node.js服务器并重新编译。

每个人都没有定义的解决方案是把你的。env文件放在根目录，例如:

项目名称/ src .env

不要在src文件夹中创建它。在应用程序的根目录中创建它。

它认为你在src文件夹中创建了文件，因为我也只在那里创建了它…然后我才意识到这是错误的，所以我在src的外部创建了.env文件。它会起作用的。

在CREATE REACT APP中使用环境变量的步骤(不含dotenv包)

Create a new file called .env in the root folder of the project (NOT inside src folder but one level up. Remember, it should be at the same level as package.json (THIS IS VERY IMPORTANT!!) Define your variables like so (Note that every variable you define should start with REACT_APP_) Example : .env file REACT_APP_ACCESS_KEY=8Sh9ZLwZevicWC-f_lmHvvyMu44cg3yZBU Note: You don't have to enclose the value in "" or '' Now you can use the variable in any of your components like so const apiKey = process.env.REACT_APP_ACCESS_KEY The name should match the key given in the .env file Now before you try this out, always remember to restart the local server. Once you run npm start it works. This step applies whenever you make changes to the .env file. We generally forget this step so it might not work. Optionally, check if .env entry is present in .gitignore file. If the entry of .env exists in .gitignore then your .env file will not be pushed to github(This is the reason why we use .env in the first place).

设置好环境变量后，必须再次运行npm start。这就是我所缺少的部分。在自动重新加载时，.env变量不会更新。