reactjs - 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)。 Documentation for this feature 。您不需要需要安装或配置dotenv才能使其正常工作。

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

    require("dotenv").config()
   

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

您可能遇到的另一个问题是，部分代码使用 Node 在服务器端运行，部分代码在客户端(在浏览器中)运行。由于 process.env 仅在 Node 中可用，因此 Gatsby 做了一些额外的工作以使其在浏览器中可用。不过，我们不希望将这些通常包含 secret 的变量的全部提供给浏览器，因此 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