透過 100+ 個技巧學習 Nuxt!

執行階段配置

Nuxt 提供執行階段配置 API,以便在您的應用程式中公開配置和密鑰。
當使用 `runtimeConfig` 選項時,必須已配置 nitro

更新執行階段配置

Nuxt 3 處理執行階段配置的方式與 Nuxt 2 不同,它使用新的合併 `runtimeConfig` 選項。

首先,您需要將 `publicRuntimeConfig` 和 `privateRuntimeConfig` 屬性合併為一個新的屬性,稱為 `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>