为基于 create-react-app 的项目运行 npm build 后在运行时读取环境变量

2023-11-30

我是 React 新手,我将部署一个 React 项目。 React项目由create-react-app创建,然后生产代码由“npm build”构建,并由Express托管。

在项目中,有一些对 API 服务器的 fetch 调用,其中的 URL 是可配置的。在开发中,我可以通过在文件 .env 的环境变量中设置它来做到这一点(例如 REACT_APP_API_URL=http://某处/)并导入到代码中。

然而,似乎这些环境变量在运行“npm build”后变得静态,我无法再更改它,即使通过执行类似“REACT_APP_API_URL=http://其他服务器/当我启动服务器时,节点express_server.js”。

我想问是否有什么方法可以在“npm build”之后为代码获取一些配置,如果可以从文件或.env获取是最好的,从环境变量对我来说也可以。

谢谢。


环境变量在构建步骤中嵌入到文件中,因此您需要在调用时为它们分配正确的值react-scripts build.

Example

"scripts": {
  "start": "cross-env REACT_APP_API_URL=http://somewhere/ react-scripts start",
  "build": "cross-env REACT_APP_API_URL=http://otherserver/ react-scripts build",
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为基于 create-react-app 的项目运行 npm build 后在运行时读取环境变量 的相关文章

  • 如何在 Jenkins 服务器上运行 Jest 测试

    我正在尝试运行我的Jest https facebook github io jest 在 Jenkins 部署期间进行测试 如果我 ssh 进入服务器 我可以 sudo 进入 Jenkins 用户并从工作区成功运行测试 但是 当我尝试从
  • React Map 总是使用最后一个元素的数据调用方法

    我正在制作一个社交媒体应用程序 我正在循环浏览所有评论并将其显示在用户界面上 当我单击编辑时 最后一条评论的文本总是显示在输入中 我尝试了很多不同的方法 改变了结构 使用bind来绑定上下文 但没有任何帮助 我正在使用 React Mate
  • Angular2 + Laravel 与实时和 WebSockets

    我构建了一个应用程序 并计划与 Angular 2 和 laravel 进行实时战斗 例如 你按下 攻击 按钮 你的对手就会实时看到他的生命在下降 我的应用程序构建有 前端 角2 Backend PHP Laravel 5 2 现在我正在寻
  • 如何使用 Web 套接字和 Angular CLI 设置代理

    我有一个使用 Angular CLI 构建的简单 Web 应用程序 我希望它使用网络套接字与后端通信 我已经编写了后端 并使用一个简单的 index html 页面进行了测试 服务器可以在套接字上发送和接收该页面 在我的 angular c
  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • React 不响应按键事件

    我正在尝试实现一些非常基本的按键检测 但我根本无法让它工作 我有一个裸露的组件 应该在onKeyDown事件 但控制台中没有任何内容被注销 class App extends React Component constructor prop
  • React JS - 单击时更改颜色并将默认颜色放在所有其他颜色上

    我有 x 个渲染数文章预览依赖于 API 调用的组件 div div Object keys images map index i gt return div div
  • Nextjs 无法在生产环境中的“.next”目录中找到有效的构建

    我正在 docker 中运行我的应用程序 但我的生产构建和启动脚本仅在 docker 环境中失败 虽然node env开发在docker环境下运行良好 这是我的脚本 无法进行生产构建并启动服务器 我正在使用nodemon和babel bui
  • npm install 命令下载所需包的源位置是什么?

    我试图获取命令 npm install 尝试连接的源位置 URL 并根据 package json 文件获取要下载的依赖包 并将其放置在本地框中 从下面提到的网址 http www tutorialspoint com nodejs nod
  • Node.js 检测两个猫鼬查找何时完成

    我正在尝试使用自动完成功能初始化两个输入library https www devbridge com sourcery components jquery autocomplete 当我加载页面时 我将触发 Ajax 来初始化两个输入文本
  • 刷新或直接点击链接时找不到 React.js 页面

    我在此链接上有一个反应项目 https notchy cross 000webhostapp com https notchy cross 000webhostapp com 如果向下滚动 您会看到一个名为 产品类别 的部分 https i
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • 如何在Sequelize中设置查询超时?

    我想看看如何在 Sequelize 中设置查询的超时时间 我查看了 Sequelize 文档以获取一些信息 但我找不到我要找的东西 我发现的最接近的是 pools acquire 选项 但我不想设置传入连接的超时 而是设置正在进行的查询的超
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 如何清除NPM的https代理设置?

    如何清除NPM之前的ssl代理设置 好吧 我搜索了很多 但我得到的所有帖子主要是关于如何set公司网络中的代理 我尝试将代理设置为空 npm config set http proxy npm config set https proxy
  • Mongoose 独特的验证不起作用。保存重复条目

    我正在开发一个 NodeJS 应用程序 其中express是框架 MongoDB是数据库 我正在使用猫鼬插件 我有一个父母模型 我已经添加了独特 真实到场 mobile 但是每当我添加相同的手机号码时 唯一性验证就会失败 除了保存重复的文档
  • 带有 npm 启动脚本的 Nodejs 应用程序

    我对nodejs很陌生 在我的docker化环境中 我想为nodejs应用程序提供appdynamics支持 这要求每个应用程序都要求将以下内容作为其应用程序的第一行 require appdynamics profile controll
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • "message": "ENOENT: 没有这样的文件或目录,打开 'E:\\astrology\\utils\\uploads\\1600798534862qf.png'"

    正如标题所示 我得到error message ENOENT no such file or directory open E astrology utils uploads 1600798534862qf png 在我的项目中 即使在通过

随机推荐

  • Swift 3 - 为什么我的导航栏没有显示?

    我有一个简单的应用程序来测试 REST API 的推送通知 我想在应用程序中显示导航栏 但它不起作用 在我的 AppDelegate 中 我有以下代码 func application application UIApplication d
  • 合并两个列表python

    我有两个清单 a 1 2 3 4 5 6 b 7 8 我想将它合并到 c 1 2 3 7 4 5 6 8 I used zip a b 但结果似乎不正确 有人可以帮忙吗 zip 只会将元组和整数配对 您还需要连接元组和新项目 c aa bb
  • 使用 post/sendmessage 进行鼠标点击不起作用[重复]

    这个问题在这里已经有答案了 可能的重复 如何在C 中模拟鼠标点击 我努力了 Window FindWindow null untitled Paint PostMessage WindowToFind WM MOUSEMOVE 0 loca
  • 组合框的默认值

    您好 我尝试为组合框设置默认值 XAML
  • 检查范围内的 int

    java中是否有一种优雅的方法来检查int是否等于某个值 或者是否比某个值大 小1 例如 如果我检查x在身边5 我想返回 true4 5 and 6 因为 4 和 6 与 5 只相差一 有内置函数可以做到这一点吗 或者我这样写会更好吗 in
  • 如何使用 Jquery 为文件上传中选择的多个图像提供预览?

    大家好 我有一个 fileuplaod 用户可以在其中选择多个图像 我想在上传之前显示这些所选图像的预览 目前我将其管理为单个图像预览 我如何为所选的多个图像提供预览 function readURL input var img input
  • 使用 JavaFX 2.2 助记符(和加速器)

    我正在尝试让 JavaFX 助记符发挥作用 我在场景中有一些按钮 我想要实现的是通过按 Ctrl S 来触发此按钮事件 这是一个代码骨架 FXML public Button btnFirst btnFirst getScene addMn
  • MVC6 TagHelpers 一次性

    在较旧的 MVC HTML 帮助程序中 可以使用IDisposable包装内容 例如BeginForm助手会自动换行 stuff 有结束语form tag stuff MVC6 TagHelpers 支持这种内容包装吗 例如我想要这个
  • 如何将 Bundle 从 Fragment 传递到 Fragment

    我在我的应用程序中使用片段 这是我的第一个片段 它只是简单地膨胀了 xml 文件 public class FragmentA extends SherlockFragment Context myContext appContext Ov
  • 如何在谷歌应用程序引擎模板上获取cookie值

    我正在开发一个应用程序来了解 python 和 Google App Engine 我想从 cookie 中获取值并在模板上打印以隐藏或显示某些内容 是否可以 哪种会话系统最适合与谷歌应用程序引擎一起使用 在 gae 和模板上使用会话的最佳
  • Angular4中的浏览器关闭事件

    我如何检测角度 4 0 2 中的浏览器关闭事件 我努力了 HostListener window unload event unloadHandler event HostListener window beforeunload event
  • std::thread 构造函数如何检测右值引用?

    显然可以将右值引用传递给std thread构造函数 我的问题是这个构造函数的定义参考参数 它说这个构造函数 template lt class Function class Args gt explicit thread Function
  • 如何在python中将对象数组转换为普通数组

    我有一个看起来像这样的对象数组 array array 2 4567 dtype object array 3 4567 dtype object array 4 4567 dtype object array 5 4567 dtype o
  • Java 应用程序挂在 in.hasNext(); 上

    我正在开发通过套接字进行通信的战舰摇摆应用程序 private ServerSocket server private Socket connection private PrintWriter out private Scanner in
  • 如何在资源管理器的重命名事件中挂钩 C++

    我不能比我的标题更清楚了 P 我想每当用户在 Windows 资源管理器中重命名文件时 并且仅在资源管理器中 运行我的程序 这是一个简单的模型 一个简单的教程链接将会非常有帮助 我什么也没找到 先感谢您 附 我是 C 新手 看来 Windo
  • Room 无法验证数据完整性

    我在使用房间数据库运行程序时收到此错误 Room cannot verify the data integrity Looks like you ve changed schema but forgot to update the vers
  • 使用 iOS 获取 Facebook 新闻源?

    我从适用于 iOS 的 Facebook SDK 开始 在我的应用程序中 我尝试获取用户新闻源并将其加载到 uitableview 中 事实证明这很棘手 我也找不到任何有关它的文档 使用 Facebook SDK 您可以使用以下方式调用 F
  • 使用 App 目录和 next-intl 翻译 Next.js 13 中的 URL

    我目前正在开发多语言 Next js 13 应用程序 并使用 next intl 包进行国际化 我一直在尝试为我的路线设置翻译后的网址 但遇到了一些问题 这是我想要实现的目标的一个例子 如果源语言是丹麦语 则路径可以是 mypage om
  • 使用自定义域部署到 Heroku [关闭]

    Closed 这个问题是无关 目前不接受答案 我已经从 My app heroku com 运行该应用程序并且它可以工作 并且我已经在我的域之间设置了 DNS 但是每当我从我指定的域打开我的应用程序时 heroku 会说 请参阅文档 如果您
  • 为基于 create-react-app 的项目运行 npm build 后在运行时读取环境变量

    我是 React 新手 我将部署一个 React 项目 React项目由create react app创建 然后生产代码由 npm build 构建 并由Express托管 在项目中 有一些对 API 服务器的 fetch 调用 其中的