时间戳

首页 > 解决方案 > nuxtjs（dotenv 除外）上推荐的动态运行时配置技术

vue.js - nuxtjs（dotenv 除外）上推荐的动态运行时配置技术

问题描述

我一直在尝试使用publicRuntimeConfig / privateRuntimeConfig在 nuxt 2.4.1 上，我在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复制值！

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

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

标签： vue.jsnuxt.jsruntime-configuration

解决方案

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.

推荐阅读