使用 .env 和 react-script start答案

【问题标题】：using .env with react-script start使用 .env 和 react-script start
【发布时间】：2021-07-31 03:17:12
【问题描述】：

我一直在尝试一切，但我无法成功。我需要在开发过程中使用 .env 文件，并启动 react-scripts

我一直在关注这个：https://create-react-app.dev/docs/adding-custom-environment-variables/ 而且我不断收到未定义的流程。

我尝试了无数在这里找到的解决方案，但没有运气。我读到它在构建过程中注入了变量，所以在开发过程中根本没有办法使用它？

我最后尝试的是 env-cmd

我的脚本如下所示：

        "start": "env-cmd -f .env.development react-scripts start",

它仍然说进程未定义。任何帮助表示赞赏谢谢

【问题讨论】：

你能附上你的环境变量键和值之一吗？
REACT_APP_ACCOUNT_SID=Axxxxxxxxxxxx 我试过 var accountSid=process.env.REACT_APP_ACCOUNT_SID 和 var accountSid=process.env.ACCOUNT_SID 没有运气
appConfig.js:4 Uncaught ReferenceError: process is not defined at appConfig.js:4

标签： reactjs

【解决方案1】：

你必须在项目的根目录下创建一个 .env 文件

不要忘记在变量的开头添加 REACT_APP。

.env

REACT_APP_FOO=foo

App.js

export default function App() {
  return (
    <div className="App">
      <h1>{process.env.REACT_APP_FOO}</h1>
    </div>
  );
}

你可以看到这个sandbox

【讨论】：

好的，它现在可以在 src 中的 index.js 中工作。我有另一个 js 在 public/assets 中，但它在那里不工作..
@jsabina 看看我在 public/assets 中创建文件的沙箱

【解决方案2】：

试试这个

在.env 文件中：

REACT_APP_DEVELOP_URL=https://test.example.com
REACT_APP_PROD_URL=https://api.example.com

在package.json 文件中

  `"start-dev": "set REACT_APP_IP_MODE=development&& npm run dev",`
  `"start-prod": "set REACT_APP_IP_MODE=production&& npm run dev"`

在项目中的使用：

let baseURL;
const env = process.env;

switch (env.REACT_APP_IP_MODE) {
case "development":
  baseURL = env.REACT_APP_DEVELOP_URL;
  break;
case "production":
  baseURL = env.REACT_APP_PROD_URL;
  break;
default:
  baseURL = env.REACT_APP_DEVELOP_URL;
  break;
}

【讨论】：