在 Gatsby 中传递环境变量答案

【问题标题】：Passing Environment Variables in Gatsby在 Gatsby 中传递环境变量
【发布时间】：2021-08-27 18:56:28
【问题描述】：

我查看了this，其中解释了要执行以下操作：

注意：由于 Gatsby 使用 Webpack DefinePlugin 使环境变量在运行时可用，因此无法从 process.env 解构它们。相反，它们必须被完全引用。

GATSBY_API_URL 将作为process.env.GATSBY_API_URL 提供给您的站点（客户端和服务器端）。

我现在有这个

useEffect(() => {
    var getRouteConfig = {
      method: 'get',
      url: `https://www.strava.com/api/v3/routes/${props.data.contentfulRoutes.slug}`,
      headers: {
        Authorization: `Bearer ${process.env.GATSBY_STRAVA_BEARER}`,
      },
    };

    axios(getRouteConfig)
      .then((res) => {

GATSBY_STRAVA_BEARER=2xxx 在我的.env 文件中。连同其他变量。我可以在gatsby-config.js 中正常访问，但我似乎无法让它们在我的组件中呈现。

如果我要登录 process.env.GATSBY_STRAVA_BEARER 我会得到未定义

虽然我的gatsby-config.js 文件顶部只有require('dotenv').config();。

【问题讨论】：

标签： reactjs gatsby

【解决方案1】：

试试看。 https://www.gatsbyjs.com/plugins/gatsby-plugin-env-variables/

我在我们自己的项目中使用它，它使访问环境变量在运行时可用。安装后，在 gatsby-config 中声明这个插件。

// gatsby-config.js
 module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-env-variables`,
      options: {
        allowList: ["APP_URL", "API_URL"]
      },
     },
   ],
 }
 
 // something component
 const Component = () => <div>{process.env.APP_URL}</div>

【讨论】：