无法在 create-react-app 生成的应用程序中读取环境变量答案

【问题标题】：can't read environment variables in create-react-app generated app无法在 create-react-app 生成的应用程序中读取环境变量
【发布时间】：2019-10-14 08:47:26
【问题描述】：

我使用 create-react-app 来生成一个节点应用程序。我将 app.js 文件更改为如下所示：

import React from 'react';
import logo from './logo.svg';
import './App.css';
let a = process.env.SOMETHING;
console.log(a)
function App() {
    console.log(process.env)
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          { process.env.SOMETHING }
        </a>
          </header>
          <div>The value of something: ${a}</div>
    </div>
  );
}

我希望a 变量能够反映我在环境中设置的内容。当我启动应用程序后查看控制台时，它是未定义的，我看到的只是应该插入变量的美元符号。

我已尝试以两种方式设置变量。首先，我创建了一个名为 setup.bash 的 bash 文件并赋予它可执行权限。它看起来像这样：

setup.bash

export SOMETHING="boom"

然后我把package.json改成了这个：

{
  "name": "server",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "./setup.bash && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

当这不起作用时，我尝试像这样启动应用程序：

SOMETHING=BOOM npm start

...环境变量仍未定义。

谁能看出问题出在哪里？

【问题讨论】：

你需要在```.env`文件中添加变量，然后才能访问。您可以在此处查看更多参考：create-react-app.dev/docs/adding-custom-environment-variables
只需创建一个 .env 文件并写入 REACT_APP_SOMETHING =boom 并重新启动反应服务器并使用它：process.env.SOMETHING。无需运行 bash 文件确保准备好 REACT_APP_

标签： javascript node.js reactjs environment-variables create-react-app

【解决方案1】：

创建.env.development 文本文件。然后您可以在此处列出变量，但所有变量必须以开头以 REACT_APP_ 前缀。

例如： REACT_APP_API_URL=https://api.url

您还可以运行 npm start 命令并在其之前声明变量：

REACT_APP_API_URL="https://api.url" npm start，但同样，请记住前缀。

详细了解 create-react-app here 的环境变量。

【讨论】：

该站点是我想到将变量与启动命令一起设置的地方。 SOMETHING=BOOM npm start。这不应该工作吗？
@DavidJ。变量名称中必须有前缀REACT_APP_。在其他情况下，create-react-app 工具不会获取它们。
谢谢，问题是我忘记了 REACT_APP 部分
仍然对我不起作用。即使我重新启动了应用程序

【解决方案2】：

在我将REACT_APP_API_URL=https://api.url 设置为.env 后，它对我不起作用

然后我停止 react-app，运行npm start，它对我来说很好。

别忘了在根目录下创建.env

【讨论】：