Reactjs 盖茨比，在浏览器中无法访问环境变量

我想使用环境变量。我创建了

.env.development

文件，并添加了一些变量。然后我加入

dotenv

插件来读取

gatsby config.js

中的变量：

require('dotenv').config({
    path: `.env.${process.env.NODE_ENV}`
});

my

.env.development

的内容：

GATSBY_APP=MYAPP

它在

gatbsy node.js

中工作，但在浏览器（REACT）中它是空的。我显示

console.log（process.env）

并返回空对象

---

即使我安装并配置了

gatsby plugin env variables

gatsby站点，作为一个关于如何使用的文档丰富的部分。要点是环境变量仅在内部nodejs服务器渲染站点时在构建时可用。为了获得这些环境变量，您需要在浏览器中使用特殊的

gatsby-*.js

文件以编程方式嵌入它们。它们所提供的似乎接近于您想要实现的目标。

看起来您将两种方法结合在一起，这可能是您遇到麻烦的地方

盖茨比提供了在特定于环境的

.env.[environment]

文件（例如

.env.development

）中定义环境变量的支持，前提是这些文件位于项目的根目录中（例如

您的项目/.env.development

）。您不需要安装或配置

dotenv

，这样才能工作

另一种方法是使用，这将允许您使用常规

.env

文件。然后需要导入并配置该工具，这通常在

gatsby config.js

的最上面一行完成，如下所示：

 require("dotenv").config()

请注意，在此场景中，您没有指定环境名称（例如，

开发

），并且不会将

.env

文件提交到存储库

您可能遇到的另一个问题是，部分代码使用节点在服务器端运行，部分代码在客户端（在浏览器中）运行。由于

process.env

仅在节点中可用，因此盖茨比做了一些额外的工作以使其在浏览器中可用。但是，我们不希望所有这些变量（通常包含秘密）都提供给浏览器，因此盖茨比只复制那些名称以

盖茨比

开头的变量。最后，作为复制这些变量方式的一个副作用，您必须显式引用它们才能使构建工作：

// this is okay everywhere
const GATSBY_APP = process.env.GATSBY_APP

// this won't work in code that runs client-side, but will work
// in `gatsby-node.js` and other files that only run in Node
const { GATSBY_APP } = process.env

---

如果您想将自己的环境变量列为白名单，或者作为前缀（如图所示）或者列出它们，您可以在

gatsby node.js

文件中添加类似的内容：

exports.onCreateWebpackConfig=（{actions，getConfig}）=>{
const config=getConfig（）；
//允许进程.env.MY\u白名单\u前缀\u*环境变量
const definePlugin=config.plugins.find（p=>p.definitions）；
for（Object.entries的常量[k，v]（process.env））{
如果（k.startsWith（“我的白名单\前缀”））{
definePlugin.definitions[`process.env.${k}`]=JSON.stringify（v）；
}
}
actions.replaceWebpackConfig（配置）；
};

我无法编辑答案，因为答案只有一个字符，但env var前缀需要下划线-它是盖茨比，而不仅仅是盖茨比