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

Question

我使用 create-react-app 生成一个 Node 应用程序。我更改了 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文件，并赋予了可执行权限。它的内容如下：

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

...并且环境变量仍然未定义。

有人能看出问题可能是什么吗？

- David J.

---

你需要在 .env 文件中添加变量，然后才能访问它们。更多参考信息可以在这里查看：https://create-react-app.dev/docs/adding-custom-environment-variables - Shubham Verma

只需创建一个.env文件并写入REACT_APP_SOMETHING = boom，然后重新启动React服务器并使用它：process.env.SOMETHING。无需运行bash文件。请确保在前面加上REACT_APP_。 - 0xAnon

Answer 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环境变量的更多信息，请点击此处。

- Artem Arkhipov

---

那个网站是我得到设置变量与启动命令一起的想法的地方。SOMETHING=BOOM npm start。这不应该有效吗？ - David J.

@DavidJ。变量名称必须以前缀REACT_APP_开头，否则create-react-app工具将无法获取它们。 - Artem Arkhipov

谢谢，问题在于我忘记了 REACT_APP 部分。 - David J.

仍然对我无效。即使我重新启动了应用程序。 - Shamim

Answer 2

在我设置了REACT_APP_API_URL=https://api.url在.env文件后，它对我没有起作用。

然后我停止了react-app，运行npm start，现在它对我有效了。

不要忘记在根目录下创建.env文件。

- châu minh