Question

我正在构建一个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;

Answer 1

在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"

Answer 2

确保在每个变量上使用前缀REACT_APP
确认.env文件上的变量名称与
上的变量名称匹配。您的js文件。例如，.env中的REACT_APP_KEY与 process.env.REACT_APP_KY
如果开发服务器正在运行，请停止它，然后使用npm重新运行启动它。我真的为此感到挣扎（变量是未定义的错误）。
每次更新.env文件时，都需要停止服务器，然后重新运行它，因为环境变量仅在构建期间更新（变量是未定义的错误）。
从变量的值中删除引号。

// Wrong: 
REACT_APP_KEY=”AHEHEHR”

// Right:
REACT_APP_KEY=AHEHEHR

Answer 3

这里要注意两件事

变量应加REACT_APP_前缀
您需要重新启动服务器以反映更改。

之后，您可以像这样process.env.REACT_APP_SOME_VARIABLE

访问变量

Answer 4

您可能需要按照document的建议致电dotenv.config()

如果您使用create-react-app，则不需要dotenv软件包。您将需要在REACT_APP_文件中的变量名称前添加.env前缀。 See the document here

Answer 5

如果上述解决方案不适合您，请检查“ .env”文件所在的位置。就像我的情况一样，我已经正确地完成了所有操作，但是错误是我将“ .env”放在了项目目录之外，这是由于我遇到了错误。

注意：您的“ .env”文件应与“ package.json”位于同一目录。

Answer 6

尝试清除缓存。

npx react-native start --reset-cache

Answer 7

重启 vscode（关闭项目，关闭编辑器）
再次打开它
启动项目

就我而言，它有很大帮助。还要记住以 REACT_APP_YOUR_NAME_KEY 开头的密钥名称

Answer 8

嘿，谢谢我所做的和工作是创建config.js文件

 const dev={
    API_URL:"http://localhost:300"
}

const prod={
    API_URL:"llll"
}
const config=process.env.NODE_ENV=='development'?dev:prod
export default  config

然后我将其导入组件中的任何位置并获取我的数据。

Answer 9

我遇到的另一个可能的陷阱是定义变量，而不是在create-react-app文件夹下，而是在上面的变量（Node server / backend .env所在的位置）中定义。确保您不要那样做，因为您会像我今天一样浪费宝贵的时间。

Answer 10

添加另一个原因：

检查您的反应代码中没有名为 process 的函数/变量

Answer 11

修正：

在 babel.config.js 中，如果您使用的是可选配置：

    {
  "plugins": [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": true
    }]
  ]
}

然后你应该导入：

import {API_URL, API_TOKEN} from "@env"

代替：

import {API_URL, API_TOKEN} from "react-native-dotenv"

NPM Package 描述本身存在这种不一致

Answer 12

不要在前端代码中存储或使用 API 密钥，因为它很容易通过开发工具读取

在 .env 中保存 API 密钥并在您的 React 应用程序中使用它们仍然是不安全的，因为可以从 DevTools 读取 API 密钥。

使用一些简单的后端代码作为服务的代理。

通过请求发送所需的数据，然后后端应使用该数据，包括存储在后端的 API 密钥，然后向需要该 API 密钥的某些特定服务发出请求。

Answer 13

无需前缀 REACT_APP_，只需识别您的环境 -

如果您使用的是开发环境 (npm start)，您应该在 .env.development 中添加一个环境变量，例如 - API_URL=http://example.com
如果您在生产环境中，更新 .env 应该可以

然后在您的 JS 文件中使用与 process.env.API_URL 相同的内容

注意：我已经在 React JS v16.8 上测试过

Answer 14

解决方案：
1.去掉双引号。("...").
2.前缀必须在每个变量上REACT_APP。

正确的方法：

REACT_APP_API_URL=http://localhost:8002

我希望它能奏效。

反应环境变量.env返回未定义

14 个答案: