无法在客户端访问 gatsby 环境变量

Posted 2023-03-10

【中文标题】无法在客户端访问 gatsby 环境变量

【英文标题】：Can't access gatsby environment variables on the client side

【发布时间】：2019-05-13 11:29:05

【问题描述】：

我设置了 .env 文件和 gatsby-config.js 如下。

// .env.development
GATSBY_API_URL=https://example.com/api

// gatsby-config.js
console.log(process.env)
...
...

虽然何时运行gatsby develop，但它显示了所有环境变量，包括GATSBY_API_URL: 'https://example.com/api'， 但是浏览器上没有环境变量。

// client side
console.log(process.env)  // => this will return   empty object

我想我按照 https://www.gatsbyjs.org/docs/environment-variables/ 所说的那样，并在 var 中添加了 GATSBY_ 前缀。

我在客户端看不到 env var 有什么原因吗？

gatsby info --clipboard

  System:
    OS: macOS Sierra 10.12.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Shell: 5.2 - /bin/zsh
  Binaries:
    Node: 11.2.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 63.0.3
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.61 => 2.0.61
    gatsby-image: ^2.0.22 => 2.0.22
    gatsby-plugin-google-analytics: ^2.0.8 => 2.0.8
    gatsby-plugin-manifest: ^2.0.11 => 2.0.11
    gatsby-plugin-no-sourcemaps: ^2.0.1 => 2.0.1
    gatsby-plugin-nprogress: ^2.0.7 => 2.0.7
    gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4
    gatsby-plugin-sass: ^2.0.5 => 2.0.5
    gatsby-plugin-sharp: ^2.0.14 => 2.0.14
    gatsby-plugin-styled-components: ^3.0.4 => 3.0.4
    gatsby-plugin-typescript: ^2.0.2 => 2.0.2
    gatsby-plugin-typography: ^2.2.2 => 2.2.2
    gatsby-plugin-webpack-bundle-analyzer: ^1.0.3 => 1.0.3
    gatsby-source-filesystem: ^2.0.10 => 2.0.10
    gatsby-transformer-sharp: ^2.1.9 => 2.1.9
    gatsby-transformer-yaml: ^2.1.6 => 2.1.6
  npmGlobalPackages:
    gatsby-cli: 2.4.5

【参考方案1】：

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

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

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

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

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

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

如果你想在服务器端访问环境变量，你不需要加上 GATSBY_ 前缀

来自文档：

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

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

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

添加 .env 文件后，终止并重新启动 gatsby develop

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

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

【讨论】：

这个空的对象把我搞砸了好几个小时

我正在使用 .env.*，但是当我不使用 GATSBY_ 前缀时，变量是 undefined。

你错了！阅读文档gatsbyjs.org/docs/environment-variables，.env 文件中的变量应以 GATSBY_ 为前缀，以便在 JS 代码（在浏览器中）访问它们

这里解释了为什么process.env 对象为空。 Gatsby 基本上使用了 Webpack 的 DefinePlugin，它在构建期间替换了 process.env.YOUR_VARIABLE 的出现，它本身并没有暴露 process.env。 ***.com/a/41248996/2579733

如果您尝试使用类似这样的方式更改命名约定，它将不起作用（坚持 gatsby 命名约定）：require('dotenv').config( path: ".env" )

【参考方案2】：

也许值得注意的是，如果你习惯写.dev 或.develop，很容易将文件命名错误。

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

【参考方案3】：

确保您已包含

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

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

【讨论】：

就我而言，我必须使用this code。

【参考方案4】：

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

执行上下文。您是在尝试访问可变客户端还是服务器端？ 变量名。以GATSBY_ 开头的名称会被区别对待。 环境文件名。默认情况下，Gatsby 期望这些为 .env.production 和 .env.development。 DotEnv 使用情况。是否使用dotenv npm 包加载 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（prod 环境为.env.production）文件并在那里定义一个变量。

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

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

echo GATSBY_MY_VAR='my value' >> .env

使用dotenv 加载gatsby-config.js 中的文件。

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

注意：变量名很重要。

【讨论】：

我们如何在构建命令期间在客户端 javascript 中使用以 GATSBY_ 为前缀的 OS 环境变量？我跑了-'GATSBY_SOME_TOKEN=12345 npm run build'。我尝试使用 process.env.GATSBY_SOME_TOKEN 但我无法访问我的组件文件中的值。我能够访问 gatsby-config 中的值。请告诉我在构建命令期间访问组件文件中 GATSBY_SOME_TOKEN 值的方法。

【参考方案5】：

您可以将您的 env 密钥添加到 gatsby-config.js 中的允许列表中

 
  resolve: `gatsby-plugin-env-variables`,
    options: 
      allowList: [
        "XXXXXXXXX", 
      ]
    

【讨论】：

除了删除GATSBY_ 命名约定（meh）上的异常之外，这并没有做很多事情

【参考方案6】：

如果您打算使用单个 .env 文件（而不是 .env.development 和 .env.production 之类的文件），那么将其添加到 gatsby-config.js 应该可以解决问题：

require('dotenv').config(
  path: '.env',
)