如何在JavaScript中使用Netlify的环境变量？

Question

我想使用环境变量来存储项目的Google Analytics（分析）跟踪ID。我已经在Netlify上创建了一个名为“ GOOGLE_ANALYTICS_ID”的环境变量。我想在我的JavaScript文件中使用此变量来替换实际的跟踪ID。

现在，我正在做的只是使用“ GOOGLE_ANALYTICS_ID”来调用变量。它在我的控制台中显示“参考错误”。

这样做的正确方法是什么？我只希望将JS文件中的跟踪ID号替换为环境变量名称，以便它从Netlify获取值，而不是在文件中对其进行硬编码。

Answer 1

您应该使用process.env.GOOGLE_ANALYTICS_ID引用环境变量。

Answer 2

在Netlify中

1. 登录以进行网络验证：https://app.netlify.com/teams/USERNAME/sites
2. 选择您的网站：https://app.netlify.com/sites/SITENAME/overview
3. 转到网站设置：https://app.netlify.com/sites/SITENAME/settings/general
4. 转到“构建和部署”>“环境变量”：https://app.netlify.com/sites/SITENAME/settings/deploys#environment
5. 编辑变量：
   • 键：GOOGLE_ANALYTICS_ID
   • 值：UA-XXXXXXX-X
6. 保存

在让分析程序在GatsbyJS中运行时，我遇到了一些问题。有一些警告：

如果您使用盖茨比：在gatsby-config.js

  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: GOOGLE_ANALYTICS_ID,
        head: true,
        anonymize: true,
      },
    },
  ]

注意：gatsby-plugin-google-analytics仅通过gatsby build命令启用

这意味着您无法使用gatsby develop在本地开发过程中测试跟踪。

来自plugin docs：

请注意，该插件在运行gatsby develop时被禁用。这样，在您仍在开发项目时就不会跟踪操作。运行gatsby build后，即会启用插件。用gatsby serve进行测试。