Nuxt3 中文课程《实战全栈开发简书》限时优惠

Runtime Config

Nuxt 提供了一个运行时配置 API,用于在你的应用程序中暴露配置和秘密。
当使用 runtimeConfig 选项时,必须已配置 nitro。

更新运行时配置

Nuxt 3 在处理运行时配置方面与 Nuxt 2 有所不同,使用了一个新的 runtimeConfig 选项来进行组合。

首先,你需要将 publicRuntimeConfigprivateRuntimeConfig 属性合并为一个新的属性,名为 runtimeConfig,其中公共配置位于名为 public 的键中。

// nuxt.config.js
- privateRuntimeConfig: {
-   apiKey: process.env.NUXT_API_KEY || 'super-secret-key'
- },
- publicRuntimeConfig: {
-   websiteURL: 'https://public-data.com'
- }
+ runtimeConfig: {
+   apiKey: process.env.NUXT_API_KEY || 'super-secret-key',
+   public: {
+     websiteURL: 'https://public-data.com'
+   }
+ }

这也意味着当你需要访问公共的运行时配置时,需要使用名为 public 的属性。如果你使用公共的运行时配置,你需要更新你的代码。

// MyWidget.vue
- <div>Website: {{ $config.websiteURL }}</div>
+ <div>Website: {{ $config.public.websiteURL }}</div>