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

Question

我想使用环境变量。我创建了 .env.development 文件并放置了一些变量。然后我包含 dotenv 插件来读取 gatsby-config.js:

中的变量

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

我的内容.env.development：

GATSBY_APP=MYAPP

它在 gatbsy-node.js 中有效，但在浏览器中 (REACT) 它是空的。我显示 console.log(process.env) 并且显示 return 空对象。

即使我安装和配置gatsby-plugin-env-variables。

Answer 1

他们提供的 Gatsby 站点作为一个关于如何使用 environment variables. The gist is that the environment variables are only available during build time when the internal nodejs server is server rendering your site. In order, get those environment variables in the browser you need to programmatically embed them using the special gatsby-*.js files. The example 的有据可查的部分，似乎接近您想要实现的目标。

Answer 2

看起来您正在结合两种方法，这可能是您运行遇到麻烦的地方。

Gatsby 开箱即用，支持在特定于环境的 .env.[environment] 文件（例如 .env.development）中定义环境变量，前提是这些文件位于项目的根目录（即 your-project/.env.development）。 Documentation for this feature。您不需要安装或配置dotenv才能正常工作。
另一种方法是使用 dotenv，这将允许您使用一般的 .env 文件。然后您需要导入和配置该工具，这通常在 gatsby-config.js 的最顶行完成，如下所示：
```
 require("dotenv").config()
```

请注意，在这种情况下，您未指定环境名称（例如 development），并且您不会将 .env 文件提交到您的存储库。

您可能运行遇到的另一个问题是您的部分代码运行s 服务器端，使用 Node，部分运行s 客户端（在浏览器中).由于 process.env 仅在 Node 中可用，Gatsby 做了一些额外的工作以使其在浏览器中可用。但是，我们不希望向浏览器提供 all 这些经常保密的变量，因此 Gatsby 只复制那些名称以 GATSBY_ 开头的变量.最后，作为复制这些变量的方式的副作用，您必须显式引用它们才能使您的构建工作：

// 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

Answer 3

如果您想将自己的环境变量列入白名单，作为前缀（此处显示）或拥有它们的列表，您可以在 gatsby-node.js 文件中添加如下内容：

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
    const config = getConfig();

    // Allow process.env.MY_WHITELIST_PREFIX_* environment variables
    const definePlugin = config.plugins.find(p => p.definitions);
    for (const [k, v] of Object.entries(process.env)) {
        if (k.startsWith("MY_WHITELIST_PREFIX_")) {
            definePlugin.definitions[`process.env.${k}`] = JSON.stringify(v);
        }
    }

    actions.replaceWebpackConfig(config);
};

Answer 4

我运行遇到了同样的问题，只是发现我做错了什么。看起来你也在做同样的事情。

文档和@coreyward 给出的解释都是正确的，但是，请注意，虽然 corey 暗示它们是两种不同的方法，问题可能是它们相互冲突，但它们并不冲突，它们做的事情不同- 这样你的代码就可以了。

但有什么问题，您正在控制台记录process.env。事实证明，这将始终输出一个空对象，即使变量可能存在。

您必须直接 console.log(process.env.GATSBY_APP) 才能看到任何值。 (Reference)

这本质上是科里在他的“最终作为副作用”部分中指出的内容的扩展，但是，他的写作方式暗示这是一个解构问题——但不限于此。

在我的例子中，我犯了上述错误并且没有正确地使用 GATSBY_ 公开变量，然后在测试时我开始像你一样记录整个 env 对象，同时搜索原因。这意味着即使我添加了正确的 GATSBY_ 前缀，我仍然看不到任何东西。

所以简而言之，可能只有你的 console.log 行是个问题 - 直接访问变量，而不是整个 env 对象。

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

Gatsby, Environment variables not accessible in browser

browser

process

environment-variables

reactjs

gatsby