無法在 create-react-app 生成的應用程序中讀取環境變量

Question

我使用 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 文件並授予它可執行權限。 它看起來像這樣：

設置.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

...並且環境變量仍未定義。

誰能看到問題可能是什么？

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 環境變量的更多信息。

Answer 2

在 .env 中設置REACT_APP_API_URL=https://api.url后，它對我.env

然后我停止 react-app，運行npm start ，它對我來說很好。

不要忘記在根目錄中創建.env