如何访问 Nuxt 插件中的 .env 变量？答案

【问题标题】：How to access .env variables in a Nuxt plugin?如何访问 Nuxt 插件中的 .env 变量？
【发布时间】：2021-08-07 01:37:13
【问题描述】：

Segment Analytics 提供了一个带有秘密 API 密钥的 sn-p。在我的Nuxt.js 项目中，我创建了一个名为segment.js 的插件，我在nuxt.config.js 中注册了它：

nuxt.config.js

plugins: [
  {
    src: "~/plugins/segment.js",
    mode: 'client'
  }
]

在我的plugins/segment.js 文件中，我有我的 sn-p：

!function(){var analytics=window.analytics=...analytics.SNIPPET_VERSION="4.13.2";
analytics.load(process.env.SEGMENT_API_SECRET);
analytics.page();
}}();

显然我不想让我的秘密 API 密钥在那里暴露，所以我将它存储在我的 .env 文件中：

.env

SEGMENT_API_SECRET=FR4....GSDF3S

问题：plugins/segment.js 中的 process.env.SEGMENT_API_SECRET 是 undefined，所以 sn-p 不起作用。如何从我的插件plugins/segment.js 访问我的.env 变量SEGMENT_API_SECRET？

【问题讨论】：

只是想知道这些 API 密钥暴露可能造成的潜在危害，因为我个人看到一些网站使用分段并直接放置他们的 API 密钥，如 analytics.load('')。

标签： environment-variables nuxt.js analytics segment

【解决方案1】：

将您的环境变量设置为nuxt.config.js

export default {
  publicRuntimeConfig: {
    segmentApiSecret: process.env.SEGMENT_API_SECRET,
  }
}

然后，这个应该可以解决问题

// segment.js
export default ({ $config: { segmentApiSecret } }) => {
  !function(){var analytics=window.analytics=...analytics.SNIPPET_VERSION="4.13.2";
  analytics.load(segmentApiSecret);
  analytics.page();
  }}();
}

【讨论】：