我有一个正在部署的 react/node 应用程序。其中一个组件尝试访问NODE_ENV以确定要使用的主机 URL(localhost 或 heroku(。
我现在意识到，即使NODE_ENV被设置为生产环境，它在浏览器上下文中也始终是"未定义的"，因为环境不是节点。
由于我无法从 react 组件访问NODE_ENV，因此如何动态设置主机服务器？
其中一个组件尝试访问NODE_ENV以确定要使用的主机URL(localhost或heroku(。
是的，绝对！
在构建时和运行时都有东西是有区别的。在构建时你会有NODE_ENV- 比如你运行webpack或其他东西来构建一些JSX，或者其他什么。
当用户访问您的网站时，您将不会在运行时NODE_ENV。在该 Web 浏览上下文中没有环境变量的概念。
在这种情况下，我所做的是以编程方式创建一个文件，该文件将有条件地具有 Web 服务器 URL。或者甚至捕获NODE_ENV并将值放入应用程序中供以后使用。
举个实际的例子：在几年前我参与的一个 React 项目中，我们自动生成了 index.html 文件。这是一个愚蠢的小文件，引入了我们需要<script>Javascript 标签，并为 React 应用程序添加了一个<div>来渲染。在模板语言中，我们做了这样的事情：
index.html.templ
<html><body ENVIRONMENT="$NODE_ENV"></body></html>
在该文件出现在构建管道的另一端之后，对于我们的生产构建，它看起来像这样：
索引.html
<html><body ENVIRONMENT="PRODUCTION"></body></html>
然后我们只是使用普通的 DOM Javascript 来抓取 body 元素并检查属性(然后将其放入 Redux 存储中？我完全忘记了(。
在用户访问时，我们有一个明显的硬编码值"生产"。但你我更清楚！
更新：我忘了，在Webpack 本身中实际上有两种方法可以做到这一点，而无需使用外部模板工具并生成我在这里描述的文件！
使用 WebPack 定义插件。这实质上会为您的转译阶段添加另一个步骤：一个进入并用其他文本字符串替换文本字符串的步骤。所以
let e = "NODE_ENV"会变得let e = "production".有一篇关于defineplugin的很好的Medium博客文章，它有点酷。Webpack 本身有一些环境变量支持。显然，如果您使用
webpack --env.NODE_ENV=production运行 webpack.然后。。。也许你可以使用process.env.NODE_ENV？此功能的 Webpack 文档对此并不完全清楚
对API URL 等内容使用NODE_ENV变量是一种很好的做法。
如果您使用了 create-react-app，则所有以REACT_APP_开头的环境变量都应该已经可以通过process.env.REACT_APP_VARIABLE_NAME访问。
您可以尝试REACT_APP_TEST=5 npm start然后console.log(process.env.REACT_APP_TEST)。
如果您不使用create-react-app，则必须将它们导入到 webpack 配置中。
您还可以选择使用 dotenv 通过.env文件定义应用程序的process.env变量。
您可以使用以下命令在索引中检查NODE_ENV.html：
if ("%NODE_ENV%" === "production") {
// ...do production stuff
} else {
// ...do development stuff
}
当 index.html 在生产环境中编译时，它将如下所示
if ("production" === "production") {
// ...do production stuff
} else {
// ...do development stuff
}
我认为你误解了这里的范围。Node是一个javascript运行时，它作为服务器运行来处理后端的东西。NODE_ENV 是 node 中用于设置环境变量的变量，因此，它只能在节点环境中访问，而不能在客户端访问。
无论如何，首先，您没有理由想要向客户端公开配置变量(这是一个漏洞问题(。如果它与某些依赖于服务器端变量的配置相关，则必须在客户端独立设置它。我可以想象的一个用例是定义一个套接字主机和端口，以从客户端侦听服务器端。希望能把事情弄清楚:)
想象一下生命周期：
- 客户端请求
- 节点服务器处理并响应请求
- 通过浏览器提供响应