Gatsby .env.production 变量 - 未定义答案

【问题标题】：Gatsby .env.production variables - undefinedGatsby .env.production 变量 - 未定义
【发布时间】：2020-02-10 09:12:37
【问题描述】：

在构建 Gatsby 项目时，我会在 production 环境中获取所有 env 变量 undefined。在development 一切都很好。我有 2 个类似的 .env.development 和 .env.production 文件。

在我的gatsby-config.js我有

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

如果我在gatsby build 期间console.log(process.env.NODE_ENV) 它给出production 并且可以访问和注销变量。但稍后在代码中类似于

return request.post(`${process.env.GEOCODING_CF_URL}/latlng`, {...});

向http://localhost:9000/ru/undefined/latlng发出请求。

我做错了什么以及如何解决这个问题？

更新：

当我运行 gatsby build - process.env.NODE_ENV 是 production

当我运行 gatsby serve - process.env.NODE_ENV 是 undefined

如果这对您有任何帮助。

【问题讨论】：

Gatsby 有关于使用环境变量的官方文档 (gatsbyjs.org/docs/environment-variables/…)。你看完了吗？
您在 env.development 和 env.production 文件中定义了环境变量吗？ GEOCODING_CF_URL=某事

标签： environment-variables gatsby

【解决方案1】：

如果您在节点中使用环境变量，则不需要前缀（例如在您的 gatsby-config.js 中）。但是，如果您需要在组件或页面中使用它们，则必须添加 GATSBY_ 作为前缀，因此 GEOCODING_CF_URL 应该是 GATSBY_GEOCODING_CF_URL

【讨论】：

【解决方案2】：

对我来说，NODE_ENV=production yarn gatsby serve 成功了。

【讨论】：

【解决方案3】：

https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/

在浏览器中访问环境变量。

默认情况下，环境变量仅在 Node.js 代码中可用，在浏览器中不可用，因为某些变量应保密，不得向访问该站点的任何人公开。

要在浏览器中公开变量，您必须在其名称前加上 GATSBY_。因此 GATSBY_API_URL 将在浏览器代码中可用，但 API_KEY 不可用。

在编译 JavaScript 时设置变量，因此在启动开发服务器或构建站点时设置。

src/pages/index.js
Copysrc/pages/index.js: copy code to clipboard
import React, { useState, useEffect } from "react"
function App() {
  const [data, setData] = useState()
  useEffect(async () => {
    const result = await fetch(
      `${process.env.GATSBY_API_URL}/users`
    ).then(res => res.json())
    setData(result.data)
  })
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>
          <a href={user.url}>{user.name}</a>
        </li>
      ))}
    </ul>
  )
}
export default App

【讨论】：