应该可以解决您的问题的几个步骤和注意事项：

console.log(process.env) 将始终打印空对象

要查看它是否真的有效，您应该直接打印变量，例如console.log(process.env.API_URL).

确保 .env.* 在您的根文件夹中

换句话说，您的文件夹层次结构应该类似于：

.env.development
.env.production
src/
  pages/
    index.js

如果您想访问服务器端环境变量，则不需要以 GATSBY_ 为前缀

从文档：

除了 .env.* 文件中定义的这些项目环境变量之外，您还可以定义操作系统环境变量。以 GATSBY_ 为前缀的操作系统环境变量将在浏览器 JavaScript 中可用。

如果您在浏览器端使用它们，则需要 GATSBY_* 前缀

前缀仅当您使用 OS Env Vars 方法时（即，您直接在服务器上而不是在这些 .env 文件中设置它们）。

gatsby develop添加 .env 文件后杀死并重新启动

我在 CodeSandbox 上重现时遇到了这个问题（在 CodeSandbox 中，您可以通过转到左侧的服务器控制面板并单击重新启动 Sandbox 来重新启动）。

这是工作示例：https : //codesandbox.io/s/jj8xzn2y15

也许值得一提的是，它很容易misname如果你是用来书写的文件.dev或.develop。

Gatsby 要求文件名准确： .env.development

确保你已经包括

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

在开始使用 ENV 变量之前，在 gatsby-config.js 文件中。

在 Gatsby 中，环境变量的可用性取决于许多因素：

• 执行上下文。您是否试图访问可变的客户端或服务器端？
• 变量名称。以 开头的名称GATSBY_被区别对待。
• 环境文件名。默认情况下，Gatsby 希望这些是.env.productionand .env.development。
• DotEnv 用法。是否使用dotenvnpm 包加载 env 文件。

以下是使环境变量在服务器和浏览器环境中可访问的不同方法。选择最适合您的设置。

服务器端：

1. 定义操作系统环境变量。

MY_VAR='my value'; export MY_VAR // will persist in the OS environment
npm run start

或者

MY_VAR='my value' npm run start // will set the variable for that process only

注意：变量名无关紧要。

2. 创建一个 env 文件并在那里定义变量。

echo MY_VAR='my value' >> .env.development

在 gatsby-config.js 中加载文件：

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

注意：文件名无关紧要。变量名无关紧要。

客户端：

1. 创建一个.env.development（.env.production用于 prod 环境）文件并在那里定义一个变量。

注意：文件名很重要。变量名无关紧要。

2. 创建一个不同命名的环境文件（比如.env）并在GATSBY_那里定义一个前缀变量。

echo GATSBY_MY_VAR='my value' >> .env

加载文件中gatsby-config.js有dotenv。

require('dotenv').config() // .env is loaded by default, no need to specify path

注意：文件名无关紧要。变量名很重要。

3. 定义一个带GATSBY_前缀的操作系统环境变量。

GATSBY_MY_VAR='my value'; export GATSBY_MY_VAR
npm run start

或者

GATSBY_MY_VAR='my value' npm run start

注意：变量名很重要。