如何在Nuxt插件中访问.env变量？

Question

Segment Analytics 提供了一个含有秘密 API 密钥的代码片段。在我的 Nuxt.js 项目中，我创建了一个名为 segment.js 的插件，并将其注册到我的 nuxt.config.js 中：

nuxt.config.js

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

在我的 plugins/segment.js 文件中，我有以下代码段：

!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，因此片段无法工作。我如何从我的插件plugins/segment.js访问我的.env变量SEGMENT_API_SECRET？

- drake035

---

只是好奇了解这些API密钥泄露可能会造成的潜在危害，因为我个人见过一些网站使用段并直接放置其API密钥，例如 analytics.load('<API_KEY>')。 - Vishwas Patel

Answer 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();
  }}();
}

---

更新: 我的更深入的回答也可以在这里找到。

- kissu

---

请不要仅仅发布可用的代码，而是帮助用户指引正确的方向，涉及他们所询问的概念，并像Greg在下面所做的那样发布文档链接。 - Daniel Storey

嗨@DanielStorey，我在这里没有提供太多细节，因为问题非常具体（插件中使用envs），而不是关于env变量的通用解释。还有一个事实，就是drake是我在日常工作中帮助了很长时间的人。这不是他关于env变量的第一个或最后一个问题：我不能在每个问题上100％重复我的答案。实际上，就在几天之后，我写了一个更详细的答案，您可以在此处查看，并在此之后多次引用了OP。 - kissu

这个方法可以运行，但是意味着秘密值将会在客户端可用。只需要在浏览器控制台中输入“NUXT.config”，就可以查看pubilcRuntimeConfig中的所有值。 - sobmortin354

@sobmortin354 我从未说过相反的话，这就是为什么它被称为publicRuntimeConfig。更多细节可以在这里找到：https://dev59.com/z3cPtIcB2Jgan1znQN9E#73139341 - kissu

我知道，我只是觉得明确地说出来会有价值。 - sobmortin354

Answer 2

对我而言，我想在我的Nuxt Firebase插件/plugins/firebase.js中使用环境(.env)变量。通常在Vue中，您需要使用前缀VUE_APP_添加这些.env变量，例如：VUE_APP_yourKeyName=YOUR_SECRET_VALUE

但是在Nuxt中，您需要在Nuxt配置文件nuxt.config.js中设置这些.env变量，如下所示：

// .env
VUE_APP_yourKeyName=YOUR_SECRET_VALUE

// nuxt.config.js
export default {
    env: {
        NUXT_VAR_NAME: process.env.VUE_APP_yourKeyName,
    },
}

// /plugins/firebase.js
const firebaseConfig = {
    apiKey: process.env.NUXT_VAR_NAME,
}

您可以在这里阅读更多关于如何使用Nuxt环境变量。

注意：对于Nuxt版本> 2.12+，在需要在运行时（而不是构建时）使用环境变量的情况下，建议将env属性替换为runtimeConfig属性：publicRuntimeConfig和privateRuntimeConfig。

- Greg

Answer 3

对于 Nuxt 3，你可以在 .env 文件中定义你的环境变量。

// .env
NUXT_PUBLIC_G_RECAPTCHA_SITE_KEY='xyz'

将其暴露在 nuxt.config.ts 中：

// nuxt.config.js
runtimeConfig: {
  public: {
    GRecaptchaSiteKey: process.env.G_RECAPTCHA_SITE_KEY;
  }
}

然后在插件内部使用useRuntimeConfig()进行调用。

例如在vue-recaptcha-v3插件中的示例。

// /plugins/recaptch.js
import { VueReCaptcha } from "vue-recaptcha-v3";
export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  nuxtApp.vueApp.use(VueReCaptcha, {
    siteKey: `${config.public.GRecaptchaSiteKey}`,
    loaderOptions: {
      autoHideBadge: false,
      explicitRenderParameters: {
        badge: "bottomleft",
      },
    },
  });
});

- mallet