我有一个正在部署的 react/node 应用程序。其中一个组件尝试访问 NODE_ENV 以确定要使用的主机 URL（localhost 或 heroku）。
我现在意识到即使 NODE_ENV 被设置为生产，它在浏览器上下文中总是“未定义”，因为环境不是节点。
由于我无法从我的 react 组件访问 NODE_ENV，我该如何动态设置主机服务器？
在前端代码中访问 NODE_ENV 有意义吗？
IT技术
node.js
reactjs
environment
2021-05-02 04:19:18
4个回答
其中一个组件尝试访问 NODE_ENV 以确定要使用的主机 URL（localhost 或 heroku）。
是的，绝对！
在构建时和运行时使用东西是有区别的。您将NODE_ENV在构建时使用 - 比如说您运行webpack或构建一些 JSX 或其他任何东西。
NODE_ENV当用户访问您的网站时，您将不会在运行时使用。在该 Web 浏览上下文中没有环境变量的概念。
在这种情况下，我所做的是以编程方式创建一个文件，该文件将有条件地包含 Web 服务器 URL。或者甚至捕获该NODE_ENV值并将其放入应用程序中以备后用。
作为一个实际的例子：在几年前我参与的一个 React 项目中，我们自动生成了我们的 index.html 文件。这是一个愚蠢的小文件，引入了<script>我们需要的Javascript 标签，并<div>为 React 应用程序添加了一个要渲染的。在模板语言中，我们做了这样的事情：
索引.html.模板
<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. 那么......也许你可以使用process.env.NODE_ENV？此功能的Webpack 文档对此并不十分清楚
NODE_ENV为 API URL 之类的东西使用变量是一种很好的做法。
如果你使用 创建react应用程序，所有以 开头的环境变量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 配置中导入它们。
您还可以选择使用dotenvprocess.env通过.env文件定义应用程序的变量。
您可以使用以下命令检查 index.html 中的 NODE_ENV：
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 中用来设置环境变量的变量，因此只能在 node 环境中访问，不能在客户端访问。
无论如何，首先，您没有理由要将配置变量暴露给客户端（这是一个漏洞问题）。如果它与某些依赖于您的服务器端变量的配置相关，则您必须在客户端独立设置它。我可以想象的一个用例是定义一个套接字主机和端口以从客户端侦听服务器端。希望这能说明问题 ：）
想象一下生命周期：
- 客户请求
- 节点服务器处理和响应请求
- 响应通过浏览器提供
其它你可能感兴趣的问题