app.config.ts · Nuxt 目錄結構

Nuxt 提供一個 app.config 設定檔，以在您的應用程式中公開響應式設定，並能夠在生命週期內或使用 Nuxt 外掛程式在執行階段更新它，並使用 HMR（熱模組替換）進行編輯。

您可以使用 app.config.ts 檔案輕鬆提供執行階段應用程式設定。它可以有 .ts、.js 或 .mjs 副檔名。

app.config.ts

export default defineAppConfig
({
  foo
: 'bar'
})

請勿將任何機密值放在 app.config 檔案中。它會暴露給使用者端套件。

當設定自訂 srcDir 時，請務必將 app.config 檔案放在新的 srcDir 路徑的根目錄。

用法

若要將設定和環境變數公開給應用程式的其餘部分，您需要在 app.config 檔案中定義設定。

app.config.ts

export default defineAppConfig
({
  theme
: {
    primaryColor
: '#ababab'
  }
})

現在，我們可以在伺服器端渲染頁面時和在瀏覽器中使用 useAppConfig 組合式函數來通用地存取 theme。

pages/index.vue

<script setup lang="ts">
const appConfig = useAppConfig()

console.log(appConfig.theme)
</script>

可以使用 updateAppConfig 工具在執行階段更新 app.config。

pages/index.vue

<script setup>
const appConfig = useAppConfig() // { foo: 'bar' }

const newAppConfig = { foo: 'baz' }

updateAppConfig(newAppConfig)

console.log(appConfig) // { foo: 'baz' }
</script>

閱讀更多關於 updateAppConfig 工具的資訊。

為應用程式設定類型

Nuxt 會嘗試從提供的應用程式設定自動產生 TypeScript 介面，因此您不必自己輸入類型。

但是，在某些情況下，您可能想要自己輸入類型。您可能想要輸入兩種可能的事物。

應用程式設定輸入

AppConfigInput 可能會被模組作者使用，他們會在設定應用程式設定時宣告哪些有效的輸入選項。這不會影響 useAppConfig() 的類型。

index.d.ts

declare module 'nuxt/schema' {
  interface AppConfigInput {
    /** Theme configuration */
    theme?: {
      /** Primary app color */
      primaryColor?: string
    }
  }
}

// It is always important to ensure you import/export something when augmenting a type
export {}

應用程式設定輸出

如果您想要輸入呼叫 useAppConfig() 的結果，那麼您會想要擴展 AppConfig。

輸入 AppConfig 時請小心，因為您會覆寫 Nuxt 從您實際定義的應用程式設定推斷的類型。

index.d.ts

declare module 'nuxt/schema' {
  interface AppConfig {
    // This will entirely replace the existing inferred `theme` property
    theme: {
      // You might want to type this value to add more specific types than Nuxt can infer,
      // such as string literal types
      primaryColor?: 'red' | 'blue'
    }
  }
}

// It is always important to ensure you import/export something when augmenting a type
export {}

合併策略

Nuxt 對於應用程式圖層中的 AppConfig 使用自訂合併策略。

此策略是使用 Function Merger 實作的，這允許為 app.config 中每個將陣列作為值的鍵定義自訂合併策略。

函式合併器只能在擴展的圖層中使用，而不能在專案中的主要 app.config 中使用。

以下是如何使用它的範例

export default defineAppConfig
({
  // Default array value
  array
: ['hello'],
})

已知限制

截至 Nuxt v3.3，app.config.ts 檔案與 Nitro 共用，這會導致以下限制

您無法直接在 app.config.ts 中匯入 Vue 元件。
某些自動匯入在 Nitro 環境中不可用。

發生這些限制的原因是 Nitro 在沒有完整的 Vue 元件支援的情況下處理應用程式設定。

雖然可以在 Nitro 設定中使用 Vite 外掛程式作為解決方法，但不建議使用這種方法

nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    vite: {
      plugins: [vue()]
    }
  }
})

使用此解決方法可能會導致意外的行為和錯誤。Vue 外掛程式是 Nitro 環境中不可用的眾多外掛程式之一。

相關問題

Nitro v3 將透過移除對應用程式設定的支援來解決這些限制。您可以在此提取請求中追蹤進度。

app.vue

app.vue 檔案是您的 Nuxt 應用程式的主要元件。

error.vue

error.vue 檔案是您的 Nuxt 應用程式中的錯誤頁面。