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

2023-12-09

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

这里需要注意三点

  1. 该变量必须是prefixed with REACT_APP_

    eg: REACT_APP_WEBSITE_NAME=hello

  2. 你需要restart服务器反映更改。

  3. 确保您拥有.env文件在你的root文件夹(与 package.json 所在的位置相同),而不是在 src 文件夹中。

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

附加提示

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

阅读更多here(我自己的帖子)和官方docs

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

反应环境变量.env返回未定义 的相关文章

随机推荐

  • 可可-Applescript NSOpenPanel?

    我该如何做NSOpenPanel在可可 Applescript 中 有什么好的教程吗 我熟悉 Applescript 但不太熟悉 Cocoa 部分 我需要一个nib对于 NSOpenPanel 我正在做一个自动操作 看我之前的问题 肖恩 斯
  • 如何在对话期间以编程方式将号码输入到 Android 中的电话应用程序屏幕中

    我想通过我的 Android 程序在对话期间以编程方式将号码输入到 Android 手机的电话应用程序中 像这样的操作 1 打开拨号键盘并 2 键入号码 例如 当您拨打该电话号码并且该电话号码有用于呼叫目的地的分机电话号码时 例如 电话号码
  • Tkinter 中 GStreamer 的视频输出?

    有谁知道我将如何使用 tkinter 窗口作为 python 内的视频接收器 管道的输出 我已经找到了许多其他 GUI 系统的方法 但我不想必须同时使用 tkinter 和其他东西 xxx 预先感谢 x 这对我在 Windows 32 位上
  • 对象必须实现 IConvertible

    对象必须实现 IConvertible 描述 执行当前 Web 请求期间发生未处理的异常 请查看堆栈跟踪以获取有关错误及其在代码中的来源的更多信息 异常详细信息 System InvalidCastException 对象必须实现 I敞篷车
  • 如何在Python中将文本中每个句子的开头大写? [复制]

    这个问题在这里已经有答案了 我想创建一个函数 将一个文本字符串作为输入 并且我想将标点符号后面的每个字母大写 问题是 字符串不像列表那样工作 所以我真的不知道该怎么做 我尝试这样做 但它似乎不起作用 def capitalize strin
  • iOS相机焦点值

    有什么办法可以从具有自动对焦功能的 iPhone 相机中获取焦点值吗 我想使用这些数据来计算 iPhone 到焦点对象的距离 显然这是一个老问题 但由于自 iOS8 以来有一个获取 镜头值 的选项 它应该出现在这里 从iOS 8开始你可以通
  • cx_Freeze 错误:resource_filename() 仅支持 .egg,不支持 .zip

    我有一个完全工作的基于 wxpython 的应用程序 全部用 Python 编写 我想制作一个exe 所以我使用了cxFreeze 在构建过程中 有许多模块似乎丢失了 有时这应该不会造成问题 但是当我运行应用程序时 它给了我来自 MySQL
  • 函数隐藏和重载的区别

    我找不到函数隐藏和重载之间的任何区别 由于函数隐藏是派生类中存在的函数并隐藏基类的函数 两者的函数名称相同 重载 派生类和基类具有相同的名称但不同的签名 class A void print int class B public A voi
  • ant build 中使用 aapt 进行紧缩/资源打包使用其他项目的缓存

    我有两个使用通用库的 Android 应用程序 每个项目都为启动屏幕和其他一些项目定义了自己的背景图像 这些图像在两个应用程序中具有相同的名称 当我从 Eclipse 构建 运行时 每个应用程序都使用正确的背景图像 但是 当我运行 ant
  • jqueryposition() 在 safari 和 chrome 中无法正常工作

    我以前曾见过这个问题一两次 但从未有过适用于我的问题的答案 据我所知 我有一个单击链接时出现的工具提示 我根据链接的位置设置工具提示的位置 如下所示 tooltip css left this position left 这在 FF IE
  • 比较两个数组并用第三个数组中的值替换重复项

    var array1 a b c d var array2 a v n d i f var array3 1 2 3 4 5 6 刚开始学习Javascript 我不知道如何比较array2给那些在array1如果是这样 请将其替换为相应的
  • 一个简单的 SQL Select 查询来抓取社交图中所有有联系的人?

    爬取社交图谱的最短或最快的 SQL 选择查询或 SQL 过程是什么 想象一下我们有这张表 UId FriendId 1 2 2 1 2 4 1 3 5 7 7 5 7 8 5 9 9 7 我们这里有两个人 我正在谈论一个 sql 查询或过程
  • 嵌入式 Python 无法使用 NumPy 指向 Python35.zip - 如何修复?

    好的 这是来自 Python 网站的基本示例 用于简单说明runpy exe运行下面的 Python 脚本 引用 Python 包含并链接到后 在 x64 Windows 上使用 Visual Studio 2015 可以正常工作pytho
  • Spring Data mongodb-复制集合

    我将 spring 数据与 mongodb 一起使用 我想使用代码而不是命令行将文档从一个集合复制到另一个集合 有没有办法在不循环所有文档并执行 插入 的情况下执行此操作 除非像这样的命令一样使用它 mongoTemplate execut
  • 错误:超时间隔必须小于 2^32-2。参数名称: dueTm

    我的班级模型中有一对多关系 例子 单个角色可以附加多个权限 因此有两张表 一张来自角色 一张用于每个角色的权限 现在我有一个角色类 该角色类又具有作为该类成员的权限列表 当我需要进行更新时 我实例化一个transactionscope对象
  • 将文本添加到 div(或其他元素)的底部 - 模拟聊天控制台

    我有一个 div 应该在文本输入到输入框中时收集文本 现在它只是重现输入 但稍后它应该产生半智能响应 我希望文本出现在 div 的底部 渐变的暗端 我希望新文本始终位于底部 旧文本始终位于上部滚动区域的灰色区域 In other words
  • WPF 样式设置器不工作

    我有一个包含组合框的自定义用户控件 我添加了一个 ComboBoxWidth 依赖属性 以允许开发人员根据需要设置宽度 使用样式设置器 我想将所有这些组合框的宽度设置为另一个用户控件上的相同值 以保持大小一致性 但是 它不起作用 如果我在每
  • 在 Visual Basic 2010 中使用变量字符串引用对象

    我的表单上有几组类似的对象 标签 进度条 Windows 上的 Visual Basic 2010 在我的代码中 我有包含数据的集合 需要将其推入每个集合的值 文本属性中 我想要一个类似于 PHP 的解决方案 因为我可以分配类似于以下的值
  • 导航回具有相同状态的搜索页面 (JavaScript)

    当用户单击搜索结果但随后返回主搜索页面时 如何使用 JavaScript 保留搜索页面的状态 e g HTML https startech enterprises github io docs guides data analytics
  • 反应环境变量.env返回未定义

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