privateRuntimeConfig在Nuxt 2.13中的应用
我发现这个伟大的职位可以在Nuxtv2.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应用程序的第一个请求)和客户端时导航到进一步的路由。
因此，问题是如何正确地在客户端加载私有配置变量。
一位良师益友会说一个神奇的词:努布。
回答 1
Stack Overflow用户
发布于 2020-07-26 19:22:36
无法正确加载私有变量客户端。这样做将暴露您的所有秘密，这正是privateRuntimeConfig现在存在的原因。在此之前，许多人错误地将他们的秘密添加到Nuxt env中，公开了他们的客户端。
不幸的是，如果您想要在运行时访问这些API，您需要改变您这样做的方式。
您要么需要静态地生成项目，要么需要运行一个API来处理使用API键调用第三方服务的问题。
有关静态生成项目(不需要服务器)，请参见https://nuxtjs.org/guide#static-generated-pre-rendering-。您可能还需要使用https://nuxtjs.org/api/configuration-generate#routes生成动态页面(例如。_product.vue)
请参阅https://nuxtjs.org/api/configuration-servermiddleware/，获取与Nuxt服务器一起运行的API可能是最简单的方法。
如果您只是运行一个博客或一个小商店，我强烈建议使用静态生成。托管要简单得多，更便宜，而且您的项目可能已经可以按原样导出。你只需要找到一个好的主机，比如Netlify。
https://stackoverflow.com/questions/63098369
复制相似问题
腾讯云开发者
