設定
預設情況下，Nuxt 的設定涵蓋大多數使用案例。 nuxt.config.ts 檔案可以覆寫或擴充此預設設定。
Nuxt 設定
nuxt.config.ts 檔案位於 Nuxt 專案的根目錄，可以覆寫或擴充應用程式的行為。
最簡化的設定檔會匯出 defineNuxtConfig 函式，其中包含您的設定物件。 defineNuxtConfig 輔助函式是全域可用的，無需匯入。
export default defineNuxtConfig({
// My Nuxt config
})
此檔案通常會在文件中提及，例如新增自訂腳本、註冊模組或變更渲染模式。
nuxt.config 檔案使用 .ts 副檔名。如此一來，您就可以在 IDE 中獲得提示，以避免在編輯設定時發生錯字和錯誤。環境覆寫
您可以在 nuxt.config 中設定完全類型化的、每個環境的覆寫。
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
},
$env: {
staging: {
//
}
},
})
若要在執行 Nuxt CLI 命令時選取環境，只需將名稱傳遞給 --envName 標記，如下所示：nuxi build --envName staging。
若要深入了解這些覆寫背後的機制，請參閱 c12 文件中關於 環境特定設定的說明。
$meta 金鑰來提供您或圖層使用者可能會使用的中繼資料。環境變數和私密權杖
runtimeConfig API 會將環境變數等數值公開給應用程式的其餘部分使用。預設情況下，這些鍵值僅在伺服器端可用。而 runtimeConfig.public 中的鍵值則在用戶端也可用。
這些數值應在 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'
}
}
})
這些變數會使用 useRuntimeConfig() composable 公開給應用程式的其餘部分使用。
<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
</script>
應用程式配置
位於來源目錄（預設為專案根目錄）中的 app.config.ts 檔案，用於公開可以在建置時確定的公開變數。與 runtimeConfig 選項相反，這些變數無法使用環境變數覆寫。
最小的設定檔會匯出包含您的設定的物件的 defineAppConfig 函式。defineAppConfig 輔助函式是全域可用的，無需匯入。
export default defineAppConfig({
title: 'Hello Nuxt',
theme: {
dark: true,
colors: {
primary: '#ff0000'
}
}
})
這些變數會使用 useAppConfig composable 公開給應用程式的其餘部分使用。
<script setup lang="ts">
const appConfig = useAppConfig()
</script>
runtimeConfig vs app.config
如上所述，runtimeConfig 和 app.config 都用於將變數公開給應用程式的其餘部分使用。為了確定您應該使用哪一個，以下是一些準則
runtimeConfig：在建置後需要使用環境變數指定的私有或公開令牌。app.config：在建置時確定的公開令牌、網站配置（例如主題變體、標題）以及任何不敏感的專案配置。
| 功能 | runtimeConfig | app.config |
|---|---|---|
| 用戶端 | 水合 | 捆綁 |
| 環境變數 | ✅ 是 | ❌ 否 |
| 響應式 | ✅ 是 | ✅ 是 |
| 類型支援 | ✅ 部分 | ✅ 是 |
| 每個請求的配置 | ❌ 否 | ✅ 是 |
| 熱模組替換 | ❌ 否 | ✅ 是 |
| 非原始 JS 類型 | ❌ 否 | ✅ 是 |
外部設定檔
Nuxt 使用 nuxt.config.ts 檔案作為配置的單一事實來源，並跳過讀取外部設定檔。在建置專案的過程中，您可能需要配置這些檔案。下表重點介紹了常見的配置，以及（如果適用）如何在 Nuxt 中配置它們。
| 名稱 | 設定檔 | 如何配置 |
|---|---|---|
| Nitro | nitro.config.ts | 在 nuxt.config 中使用 nitro 鍵 |
| PostCSS | postcss.config.js | 在 nuxt.config 中使用 postcss 鍵 |
| Vite | vite.config.ts | 在 nuxt.config 中使用 vite 鍵 |
| webpack | webpack.config.ts | 在 nuxt.config 中使用 webpack 鍵 |
以下是其他常見設定檔的清單
| 名稱 | 設定檔 | 如何配置 |
|---|---|---|
| TypeScript | tsconfig.json | 更多資訊 |
| ESLint | eslint.config.js | 更多資訊 |
| Prettier | prettier.config.js | 更多資訊 |
| Stylelint | stylelint.config.js | 更多資訊 |
| TailwindCSS | tailwind.config.js | 更多資訊 |
| Vitest | vitest.config.ts | 更多資訊 |
Vue 配置
使用 Vite
如果您需要將選項傳遞給 @vitejs/plugin-vue 或 @vitejs/plugin-vue-jsx，您可以在 nuxt.config 檔案中執行此操作。
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 集成。