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

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

这里要注意的三件事

1. 该变量应该前缀与REACT_APP_
2. 您需要重新启动服务器以反映更改。
3. 确保您的根文件夹（位于package.json所在的位置）中有.env文件，而不是src文件夹中。

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

在这里阅读更多

Answer 2

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

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

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

Answer 3

• 在 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 4

• 确保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

Answer 5

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

如果您使用的是create-react-app，则不需要dotenv打包。您将需要REACT_APP_在.env文件中的变量名称前添加前缀。在这里查看文件

Answer 6

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

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