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

Question

细分分析提供了一个包含秘密 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

问题：process.env.SEGMENT_API_SECRET因此该片段不起作用。如何从我的插件访问我的变量？plugins/segment.jsundefined.envSEGMENT_API_SECRETplugins/segment.js

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

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

Answer 2

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

但对于 Nuxt，您必须在 Nuxt 配置中设置这些 .env 变量，nuxt.config.js如下所示：

// .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。