Gatsby，浏览器中无法访问环境变量

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)并返回空对象。

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

Answer 1

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

1. Gatsby 开箱即用，支持在特定于环境的.env.[environment]文件（例如.env.development）中定义环境变量，前提是这些文件位于项目的根目录中（即your-project/.env.development）。 此功能的文档。你没有需要安装或配置dotenv此工作。

2. 另一种方法是使用dotenv，它允许您使用通用.env文件。然后您需要导入和配置该工具，这通常在最顶部完成，gatsby-config.js如下所示：

    require("dotenv").config()
   

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

您可能遇到的另一个问题是，您的代码的一部分使用 Node 在服务器端运行，一部分在客户端（在浏览器中）运行。由于process.env仅在 Node 中可用，Gatsby 做了一些额外的工作以使其在浏览器中可用。但是，我们不希望将所有这些经常保存秘密的变量都提供给浏览器，因此 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