reactjs - 在 React 应用程序中创建一个 "base URL"常量

标签 reactjs webpack

我正在用 React 构建一些网站。由于我的后端 API 和我的图像文件夹的地址可能会从一种环境更改为另一种环境,因此我想设置一些“常量”,以保存这些基地址。当我使用 PHP 构建非单页应用程序时,我会在每个环境中保留一个配置文件,其中包含这些常量。我如何使用 React(或任何其他单页应用程序...)

我会注意到,我已经看到使用 process.env 的各种配置,但据我所知,这仅与 Nodejs 相关(我说得对吗?)。我的应用程序将由 Apache PHP 提供服务。

我不能只使用相对路径,因为后端可能位于不同的主机上。

我玩过的一种方法是在应用程序呈现时执行 hack,如下所示:

window.baseURL= window.location.href.includes('local') ? 'http://localhost' : 'something else...'

它有效,但我觉得这是一件非常不专业的事情。

处理这个问题的专业方法是什么?如果有帮助,我正在使用 Webpack(也许它可以访问一些配置文件,并设置一些全局变量......?)。

最佳答案

我可以告诉你我在我的项目中做了什么。我有 2 个环境参数( NODE_ENV=productionNODE_ENV=development,它们在 package.json 文件中的构建脚本中传递),以及 NODE_ENV我阅读了相关的 settings.js 文件,相应地调用( settings.production.js/settings.development.js ),并根据当前环境从那里提取所有不同的参数。

关于reactjs - 在 React 应用程序中创建一个 "base URL"常量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49089479/

相关文章:

javascript - 如何从 React 中的购物车中删除两个冲突的 ID?

javascript - React,无需引用即可获取状态

javascript - 如何在普通的 React js 中展开和折叠表格行。如果行的描述有多个,则仅显示一行并显示展开按钮

javascript - Angular 2 CLI ng build --watch 设置配置

javascript - 使用 webpack-dev-server 时,html-webpack-plugin 不会将 js 文件注入(inject) index.html

javascript - 来自 EventListener 的 ReactJS 事件不会更新 View

javascript - 无法在 head 开头插入元标记

typescript - 如何阻止从不应从文件夹导入的 vscode typescript 文件?

css - 使用 vuetify 开发和生产之间的 #app css 不同

javascript - 编译 Laravel、Webpack 和 Sparkline 的问题