如何在 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引用 env var。

Answer 2

在 Netlify

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

我在 GatsbyJS 中使用分析时遇到了一些问题。 有一些注意事项：

如果您使用 Gatsby：在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测试跟踪。

从插件文档：

请注意，此插件在运行gatsby develop被禁用。 这样，在您仍在开发项目时不会跟踪操作。 一旦你运行gatsby build插件就启用了。 用gatsby serve测试一下。