配置

預設情況下，Nuxt 的配置涵蓋了大多數用例。nuxt.config.ts 檔案可以覆蓋或擴充套件此預設配置。

Nuxt 配置

nuxt.config.ts 檔案位於 Nuxt 專案的根目錄，可以覆蓋或擴充套件應用程式的行為。

一個最小的配置檔案會匯出包含配置物件的 defineNuxtConfig 函式。defineNuxtConfig 輔助函式無需匯入即可全域性使用。

export default defineNuxtConfig({
  // My Nuxt config
})

此檔案在文件中經常被提及，例如用於新增自定義指令碼、註冊模組或更改渲染模式。

環境覆蓋

您可以在 nuxt.config 中配置完全型別化的、按環境覆蓋的配置。

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true },
    },
  },
  $development: {
    //
  },
  $env: {
    staging: {
      //
    },
  },
})

要在執行 Nuxt CLI 命令時選擇環境，只需將名稱傳遞給 --envName 標誌，例如：nuxt build --envName staging。

要了解有關這些覆蓋機制的更多資訊，請參閱 c12 文件中關於環境特定配置.

環境變數和私有令牌

runtimeConfig API 將環境變數等值暴露給應用程式的其餘部分。預設情況下，這些鍵僅在伺服器端可用。runtimeConfig.public 和 runtimeConfig.app（Nuxt 內部使用）中的鍵也在客戶端可用。

這些值應在 nuxt.config 中定義，並且可以使用環境變數進行覆蓋。

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available server-side
    apiSecret: '123',
    // Keys within public are also exposed client-side
    public: {
      apiBase: '/api',
    },
  },
})

# This will override the value of apiSecret
NUXT_API_SECRET=api_secret_token

這些變數透過 useRuntimeConfig() 可組合函式暴露給應用程式的其餘部分。

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
</script>

應用配置

位於源目錄（預設 app/）中的 app.config.ts 檔案用於暴露可在構建時確定的公共變數。與 runtimeConfig 選項相反，這些變數不能使用環境變數進行覆蓋。

一個最小的配置檔案會匯出包含配置物件的 defineAppConfig 函式。defineAppConfig 輔助函式無需匯入即可全域性使用。

export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000',
    },
  },
})

這些變數透過 useAppConfig 可組合函式暴露給應用程式的其餘部分。

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

runtimeConfig 對比 app.config

如上所述，runtimeConfig 和 app.config 都用於將變數暴露給應用程式的其餘部分。為了確定您應該使用哪一個，這裡有一些指導原則：

• runtimeConfig：需要在構建後使用環境變數指定的私有或公共令牌。
• app.config：在構建時確定的公共令牌、網站配置（如主題變體、標題）以及任何不敏感的專案配置。

外部配置檔案

Nuxt 使用 nuxt.config.ts 檔案作為配置的單一真相來源，並跳過讀取外部配置檔案。在構建專案過程中，您可能需要配置這些檔案。下表重點介紹了常見的配置，以及在適用情況下，如何使用 Nuxt 進行配置。

以下是其他常見配置檔案的列表：

Vue 配置

使用 Vite

如果您需要將選項傳遞給 @vitejs/plugin-vue 或 @vitejs/plugin-vue-jsx，您可以在 nuxt.config 檔案中進行。

• vite.vue 用於 @vitejs/plugin-vue。檢視可用選項.
• vite.vueJsx 用於 @vitejs/plugin-vue-jsx。檢視可用選項.

export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true,
    },
    vueJsx: {
      mergeProps: true,
    },
  },
})

使用 webpack

如果您使用 webpack 並需要配置 vue-loader，您可以在 nuxt.config 檔案中使用 webpack.loaders.vue 鍵進行。可用選項在此處定義.

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      },
    },
  },
})

啟用實驗性 Vue 特性

您可能需要啟用 Vue 中的實驗性特性，例如 propsDestructure。無論您使用哪種構建器，Nuxt 都提供了在 nuxt.config.ts 中輕鬆實現的方法。

export default defineNuxtConfig({
  vue: {
    propsDestructure: true,
  },
})

從 Vue 3.4 和 Nuxt 3.9 遷移實驗性 reactivityTransform

從 Nuxt 3.9 和 Vue 3.4 開始，reactivityTransform 已從 Vue 移至 Vue Macros，後者具有Nuxt 整合.