无法在create-电脑我帮您

无法在create

我使用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=""
          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.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的环境变量的更多信息。