4

我发现这篇很棒的帖子可以正确管理 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。

4

1 回答 1

5

无法在客户端正确加载私有变量。这样做将暴露你所有的秘密，这正是privateRuntimeConfig现在存在的原因。以前，很多人错误地将他们的秘密添加到 Nuxtenv中，从而暴露了他们的客户端。

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

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

请参阅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。

于 2020-07-26T19:22:36.310 回答