时间戳

首页 > 解决方案 > Gatsby，浏览器中无法访问的环境变量

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

问题描述

我想使用环境变量。我创建了.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.

标签： reactjsbrowserprocessenvironment-variablesgatsby

解决方案

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

  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

推荐阅读