为啥 process.env 返回一个空对象，而 process.env.prop 返回 prop 值？

Posted 2023-02-24

【中文标题】为啥 process.env 返回一个空对象，而 process.env.prop 返回 prop 值？

【英文标题】：Why is process.env returning an empty object, while process.env.prop returns the prop value?为什么 process.env 返回一个空对象，而 process.env.prop 返回 prop 值？

【发布时间】：2019-11-25 04:24:58

【问题描述】：

所以我有一个节点机器上最简单的例子，它运行一个带有 webpack 的 react-redux 应用程序（虽然我认为这对于这个问题并不重要，但它是在 nodejs 上的）。

特定调用获得价值包：

console.log(process.env.NODE_ENV); // output: 'development'

普通电话一无所获：

console.log(process.env); // output: 

我在这里错过了什么？

添加可能相关的信息：

我将dotenv 用于test 环境。 我在开发环境中使用dotenv-webpack。 对于部署到 Heroku 的 production 环境，我没有使用这两种方法 该问题在所有环境中都存在。

【问题讨论】：

这些控制台日志是一个接一个？是否放置在测试中？你用哪个命令运行js文件？

【参考方案1】：

process.env 变量在浏览器中为空的问题是因为浏览器无法真正访问node.js 的process。它虽然在浏览器中运行。

process.env.ANYTHING 的使用通常是通过像 https://webpack.js.org/plugins/define-plugin/ 这样的插件来实现的，它只是简单地 replace 任何出现的 process.env.ANYTINHG 在构建期间带有 env 变量。它真的很简单 str.replace(/process.env.ANYTING/value/) 这需要在构建期间完成，因为一旦你输出 dist bundle.js 你就无法访问 ENV 变量。

在构建期间替换

因此，您需要确保当您使用 yarn build 生成生产版本时，您正在使用 webpack.DefinePlugin 并将那些 process.env 调用替换为当前的 ENV 值。它们不能在运行时注入。

在运行时注入

当您需要在运行时访问环境变量时，在浏览器中的 javascript 中基本上是不可能的。有一些技巧，例如 nginx 可以将当前环境变量序列化为window.ENV 变量，在你的应用程序中你不会使用process.env，而是window.ENV。因此，您需要在构建应用程序时使用 ENV 变量，或者构建将当前 ENV 作为 json 动态输出到窗口并通过 react 访问的机制。如果您使用的是docker，则可以使用ENTRYPOINT 完成，否则您需要一些bash 脚本，它将始终将当前ENV 变量作为JSON 输出到您的应用程序的index.html

【讨论】：

嘿，谢谢，我最终还是自己解决了这个问题，并设置了 webpack.DefinePlugin（顺便说一句，有些 web-pack 插件需要安装而有些不需要）。所以它现在可以工作了，但它太不优雅了，.env 文件的全部乐趣在于它们给它带来了一些秩序，同时通过 webpack 手动定义它并不好......但这只是额外的。感谢您的帮助和明确的答案！

这里是定义插件的 webpack 文档的链接：webpack.js.org/plugins/environment-plugin