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

Question

我如下设置了.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'的环境变量， 但浏览器上没有env vars。

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

我认为我遵循了https://www.gatsbyjs.org/docs/environment-variables/的说法，并在变量中添加了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

Answer 1

确保已包含

require（“ dotenv”）。config（{ 路径：.env.${process.env.NODE_ENV}， }）

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

。

Answer 2

一些可以解决您问题的步骤和说明：

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

要查看其是否确实有效，您应该直接打印变量，例如console.log(process.env.API_URL)。

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

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

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

如果您使用的是.env。*文件，则无需前缀GATSBY _

从文档中

  

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

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

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

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

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

Answer 3

也许值得一提的是，如果您习惯于写.dev或.develop，很容易给文件命名错误。

Gatsby要求文件的名称必须准确：.env.development

Answer 4

在盖茨比，您的环境变量的可用性取决于许多因素：

• 执行上下文。您是要到达可变客户端还是服务器端？
• 变量名。以GATSBY_开头的名称有不同的处理方式。
• 环境文件名。默认情况下，盖茨比期望它们分别为.env.production和.env.development。
• DotEnv的用法。是否使用dotenv npm软件包加载环境文件。

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

服务器端：

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

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

OR

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

注意：变量名称无关紧要。

2。创建一个环境文件并在其中定义变量。

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

将文件加载到gatsby-config.js中：

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

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

客户端：

1。创建一个.env.development（在产品环境中为.env.production）文件，并在其中定义一个变量。

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

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_前缀的OS环境变量。

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

OR

GATSBY_MY_VAR='my value' npm run start

注意：变量名很重要。

Answer 5

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

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

Answer 6

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

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