在 Nuxt 2.13 中使用 privateRuntimeConfig

Question

我发现这篇很棒的文章可以在 Nuxt v2.13 应用程序中正确管理环境变量。我只是尝试实现建议的逻辑，但我遇到了一些问题，我想问你。

我设置 publicRuntimeConfig 和 privateRuntimeConfig 如下。我正在使用 Contentful，因此我必须正确设置 Contentful 令牌才能进行 API 调用。

export default {
  // Nuxt target - See https://nuxtjs.org/api/configuration-target
  target: 'static',

  // Nuxt rendering mode - See https://nuxtjs.org/api/configuration-mode
  mode: 'universal',

  // Both server and client.
  publicRuntimeConfig: {
    backendApi: process.env.BACKEND_API_URL
    shopUrl: process.env.SHOP_URL
  },

  // Only available on server using same $config (it overrides publicRuntimeConfig)
  privateRuntimeConfig: {
    ctfSpaceId: CTF_SPACE_ID,
    ctfCdaAccessToken: CTF_CDA_ACCESS_TOKEN,
    ctfCpaAccessToken: CTF_CPA_ACCESS_TOKEN,
    ctfEnvironment: CTF_ENVIRONMENT
  },

在模块导出语句上方，我必须定义 .env 中的数据，因此：

require('dotenv').config()

const {
  CTF_SPACE_ID,
  CTF_CDA_ACCESS_TOKEN,
  CTF_CPA_ACCESS_TOKEN,
  CTF_ENVIRONMENT,
} = process.env

接下来，移入 Nuxt 页面组件（选择 pages/index.vue 作为参考），记住 privateRuntimeConfig 仅在服务器端可用，我使用 $config 增强 asyncData 挂钩：

 async asyncData({ app, $config: { ctfSpaceId, ctfCdaAccessToken } }) {
    const $i18n = app.i18n
    const client = contentful.createClient({
      space: ctfSpaceId,
      accessToken: ctfCdaAccessToken,
    })
   ...
}

酷，我刷新了 Nuxt 正在运行的浏览器选项卡，asyncData 完成了它的工作，并且私有配置变量也得到了适当的设置。

接下来，我浏览其他应用程序页面，然后返回索引和 .

Nuxt 崩溃并且 $config 私有变量未定义。

我不想找到解决方法，因为我们正在讨论安全性，因此我只能询问我的配置是否正确以及 Nuxt 在幕后发生了什么。

Nuxt.js 文档很明确：

asyncData 每次在加载页面组件之前都会被调用。它将在服务器端调用一次（在对 Nuxt 应用程序的第一个请求时），在导航到其他路线时在客户端调用。

所以问题是如何在客户端正确加载私有配置变量。

一位导师朋友会说出一个神奇的词：Noob。

Answer 1

无法在客户端正确加载私有变量。这样做就会暴露你所有的秘密，而这正是privateRuntimeConfig现在存在的原因。之前，很多人都犯了一个错误，将他们的秘密添加到 Nuxt 中env，从而暴露了客户端。

不幸的是，如果您想在运行时访问这些 API，则需要更改执行此操作的方式。

您要么需要静态生成项目，要么需要运行一个 API 来处理使用 API 密钥调用第 3 方服务。

请参阅https://nuxtjs.org/guide#static- generated-pre-rendering- 静态生成项目（不需要服务器）。您可能还需要使用https://nuxtjs.org/api/configuration-generate#routes来生成动态页面（例如_product.vue）

请参阅https://nuxtjs.org/api/configuration-servermiddleware/了解可能是让 API 与 Nuxt 服务器一起运行的最简单方法。

如果您只是经营博客或小商店，我强烈建议您使用静态生成。托管更简单，更便宜，并且您的项目可能已经能够按原样导出。您只需要找到一个好的主机，例如 Netlify。