react环境变量 .env 返回未定义

IT技术 reactjs undefined
2021-04-12 04:59:32

我正在构建一个 React 应用程序，我需要从我的 api 中获取数据，现在我想将 api url 存储为环境变量。我有我的 .env 文件，我安装了 dotenv，这是我的代码 process.env.API_URL 返回未定义。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from '../src/components/Home'
import dotenv from  'dotenv'
import path from 'path'


class App extends Component {
  render() {
    console.log(process.env.API_URL)
    return (
      <div>
        <Home/>
      </div>
    );
  }
}

export default App;
6个回答

这里要注意三件事

  1. 该变量应该前缀与REACT_APP_

    例如： REACT_APP_WEBSITE_NAME=hello

  2. 您需要重新启动服务器以反映更改。

  3. 确保您的根文件夹中有 .env 文件（与 package.json 相同的位置），而不是 src 文件夹中。

之后，您可以像这样访问变量 process.env.REACT_APP_SOME_VARIABLE

附加提示

  1. 无需将变量值用单引号或双引号括起来。
  2. 不要在每行的末尾放置分号;或逗号,。

在这里阅读更多（我自己的帖子）和官方文档

节省了数小时的精力。
2021-05-27 04:59:32
3号救了我！
2021-06-06 04:59:32
2号救了我！不知道您必须重新启动服务器才能反映 .env 更改。谢谢！
2021-06-16 04:59:32
非常感谢！真的很困惑根文件夹是什么意思
2021-06-16 04:59:32
需要以“REACT_APP_”为前缀为我修复了它。谢谢！
2021-06-19 04:59:32

您可能需要dotenv.config()按照文档的建议调用

如果您使用的是 create-react-app，则不需要dotenvpackage.json 。您需要为文件中REACT_APP_的变量名添加前缀.env。在此处查看文档

  • 在 React 环境变量上添加前缀 REACT_APP_。

    apiKey: process.env.REACT_APP_API_KEY

  • 确保 .env 文件位于根目录中。

    src/
.env
.gitignore
package.json
package-lock.json

  • 在 .env 文件中进行更改后重新启动开发服务器。

  • 只复制引号内的值，不要忘记删除尾随逗号（它困扰了我几个小时）。这些例子会给你一个错误。

    REACT_APP_API_KEY=Ach2o1invVocSn25FcQhash209,
REACT_APP_API_KEY="Ach2o1invVocSn25FcQhash209",
REACT_APP_API_KEY="Ach2o1invVocSn25FcQhash209"

  • 确保REACT_APP在每个变量上都使用了前缀

  • 确认 .env 文件中的变量名与 js 文件中的变量名匹配。
    例如，REACT_APP_KEY在 .env 与 process.env.REACT_APP_KY

  • 如果开发服务器正在运行，请停止它，然后使用 npm start it 重新运行。我真的很挣扎（变量是一个未定义的错误）。
  • 每次更新 .env 文件时，都需要停止服务器并重新运行它，因为环境变量仅在构建期间更新（变量是未定义的错误）。
  • 从变量的值中删除引号。
// Wrong: 
REACT_APP_KEY=”AHEHEHR”

// Right:
REACT_APP_KEY=AHEHEHR

.env从JS文件中调用变量时，您需要process.env.在写入.env变量之前通过前缀调用它

因此它看起来像 process.env.REACT_APP_NOT_SECRET_CODE

并且不要忘记以REACT_APP_前面答案中提到的前缀开头变量名，否则出于安全原因，react 将忽略它。

其它你可能感兴趣的问题
上一篇不变违规：此导航器缺少导航props 下一篇在 ReactJS 中，为什么“setState”在同步调用时表现不同？