无法在客户端上访问gatsby环境变量 [英] Can't access gatsby environment variables on the client side
问题描述
我按如下所示设置.env文件和gatsby-config.js.
I set up .env file and gatsby-config.js as below.
// .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.
Although when to run gatsby develop
, it shows all env vars including GATSBY_API_URL: 'https://example.com/api'
,
but there is no env vars on a browser.
// client side
console.log(process.env) // => this will return {} empty object
我认为我遵循了 https://www.gatsbyjs.org/docs/environment-variables /,并在变量中添加了GATSBY_
前缀.
I think I followed https://www.gatsbyjs.org/docs/environment-variables/ as it says, and added GATSBY_
prefix to the var.
我为什么没有在客户端看到env var?
Is there a reason why I don't see the env var on the client side?
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
推荐答案
一些步骤&可以解决您问题的注释:
A few steps & notes that should solve your problem:
要查看其是否确实有效,您应该直接打印变量,例如console.log(process.env.API_URL)
.
To see if it's really working, you should print the variables directly, e.g. console.log(process.env.API_URL)
.
换句话说,您的文件夹层次结构应类似于:
In other words, your folder hierarchy should look something like:
.env.development
.env.production
src/
pages/
index.js
如果要在服务器端访问环境变量,则无需前缀GATSBY _
从文档中
You don't need to prefix with GATSBY_ if you want to access env variables server-side
From the docs:
除了.env.*文件中定义的这些项目环境变量外,您还可以定义OS Env Vars.带有GATSBY_前缀的OS Env Vars将在浏览器JavaScript中可用.
In addition to these Project Environment Variables defined in .env.* files, you could also define OS Env Vars. OS Env Vars which are prefixed with GATSBY_ will become available in browser JavaScript.
如果在浏览器端使用它们,则需要GATSBY_ *前缀
仅当您使用OS Env Vars方法时才使用前缀(即,直接在服务器上而不是在这些.env文件中设置它们).
You need the GATSBY_* prefix if you are using them browser-side
The prefixing is only if you use the OS Env Vars approach (i.e. you set them directly on your server and not in these .env files).
在CodeSandbox上进行复制时,我遇到了这个问题(在CodeSandbox中,您可以通过转到左侧的服务器控制面板",然后单击重新启动沙箱"来进行重新启动).
I ran into this when reproducing on CodeSandbox (in CodeSandbox, you do the restart by going to Server Control Panel on the left, and clicking Restart Sandbox).
这是工作示例: https://codesandbox.io/s/jj8xzn2y15
这篇关于无法在客户端上访问gatsby环境变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!