1. 首页
  2. 问题
  3. 无法在客户端上访问gatsby环境变量
小编典典

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

reactjs

我如下设置了.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/的说法，并GATSBY_在var中添加了前缀。

为什么我在客户端看不到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

阅读 492

收藏
2020-07-22

共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文件中设置它们）。

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

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

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

2020-07-22