如何访问 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？

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

更新：我的更深入的回答也可以是found here。

Answer 2

对我来说，我想在我的 Nuxt Firebase 插件中使用我的环境 (.env) 变量：/plugins/firebase.js。通常在 Vue 中，你必须在这些 .env 变量前加上 VUE_APP_ 前缀，例如：VUE_APP_yourKeyName=YOUR_SECRET_VALUE

但是对于 Nuxt，您必须在 Nuxt Config 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 Environment Variables here 的更多信息。

NOTE: For Nuxt versions > 2.12+, in cases where environment variables are required at runtime (not build time) it is recommended to replace the env property with runtimeConfig properties : publicRuntimeConfig and privateRuntimeConfig.

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

How to access .env variables in a Nuxt plugin?

environment-variables

nuxt.js

analytics

segment