在 nuxtjs 上推荐的动态运行时配置技术(dotenv 除外) [英] Recommended dynamic runtime configuration technique on nuxtjs (other than dotenv)

问题描述

我一直在尝试使用 publicRuntimeConfig/privateRuntimeConfig在 nuxt 2.4.1 上，我在 nuxt.config.js

I have been trying to use publicRuntimeConfig / privateRuntimeConfig On nuxt 2.4.1, I have defined my runtime config as follows on nuxt.config.js

publicRuntimeConfig: {
    DATA_API_HOST_URL: process.env.VUE_APP_DATA_API_HOST_URL,
  },
  privateRuntimeConfig: {
    AUTH_APP_CLIENT_SECRET: process.env.VUE_APP_AUTH_APP_CLIENT_SECRET,
  },

并在我的 login.vue

asyncData( ctx ) {
  console.log(ctx.$config.DATA_API_HOST_URL)
  //some activity
}

1. 密钥显示在 asyncData 内的 $config 上.我在 chrome 开发工具上进行了调试.但是值不是从 process.env.VUE_APP_DATA_API_HOST_URL 读取的.该值显示为 undefined.但是，process.env.VUE_APP_DATA_API_HOST_URL 显示的值为 OK.重点是远离 process.env.
2. this.$config.DATA_API_HOST_URL 也不访问这些值.
3. '${DATA_API_HOST_URL}' 显示在示例中，但我相信它仅适用于 asyncData 处的显式参数声明，例如 asyncData( { $config : {DATA_API_HOST_URL}).
4. 当我使用 DATA_API_HOST_URL 传递值时: process.env.VUE_APP_DATA_API_HOST_URL ||'https://test.api.com'，它似乎使用 ctx.$config.DATA_API_HOST_URL 很好地复制了值！

1. The keys are showing up on $config inside asyncData. I debugged on chrome dev tools. But value is not read from process.env.VUE_APP_DATA_API_HOST_URL. The value is showing up as undefined. However, process.env.VUE_APP_DATA_API_HOST_URL is showing the value OK. The whole point is to move away from process.env.
2. this.$config.DATA_API_HOST_URL also does not access the values.
3. '${DATA_API_HOST_URL}' is shown in examples but I believe it is only for explicit param declarations at asyncData like asyncData( { $config : {DATA_API_HOST_URL}).
4. When I pass values as it is using DATA_API_HOST_URL: process.env.VUE_APP_DATA_API_HOST_URL || 'https://test.api.com', it seems to copy the value fine using ctx.$config.DATA_API_HOST_URL!

在我看来，将 process.env 复制到 *RuntimeConfig 有问题！

Looking to me like copying process.env to *RuntimeConfig has a problem!

导入和使用运行时配置的推荐方式是什么?

What is the recommended way of importing and using runtime configurations?

推荐答案

根据您标记的 Nuxt 博客文章中的文档，您尝试使用的功能在 2.13 中发布(如果我没有误解，您正在使用 2.4).这可能是您所看到的行为背后的原因.我建议更新您的项目依赖项或尝试其他方法.

As per documentation in the Nuxt blog post you marked, the feature your are trying to use is released in 2.13 (you´re using 2.4 if i not misunderstood). That could be the reason behind the behaviour you're seeing. I'd recommend update your project dependencies or trying another approach.

这篇关于在 nuxtjs 上推荐的动态运行时配置技术(dotenv 除外)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！