透過 100 多個提示學習 Nuxt!

Nuxt 配置

探索您可以在 nuxt.config.ts 檔案中使用的所有選項。
此檔案是從 Nuxt 原始碼自動產生的。

alias

您可以透過定義其他別名來存取 JavaScript 和 CSS 中的自訂目錄,以改善您的 DX (開發者體驗)。

  • 類型: object
  • 預設值
{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "#shared": "/<rootDir>/shared",
  "assets": "/<srcDir>/assets",
  "public": "/<srcDir>/public",
  "#build": "/<rootDir>/.nuxt",
  "#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
}
注意: 在 webpack 上下文中(圖片來源、CSS - 但不包含 JavaScript),您必須使用 ~ 作為前綴來存取您的別名。
注意: 這些別名將會自動新增至產生的 .nuxt/tsconfig.json,以便您可以獲得完整的類型支援和路徑自動完成功能。如果您需要進一步擴展 ./.nuxt/tsconfig.json 提供的選項,請務必在此處或 nuxt.config 中的 typescript.tsConfig 屬性中新增它們。

範例:

export default {
  alias: {
    'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
    'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
    'data': fileURLToPath(new URL('./assets/other/data', import.meta.url))
  }
}

analyzeDir

當執行 nuxt analyze 時,Nuxt 將會儲存產生檔案的目錄。

如果指定相對路徑,它將會相對於您的 rootDir

  • 類型: string
  • 預設值: "/<rootDir>/.nuxt/analyze"

app

Nuxt 應用程式設定。

baseURL

您的 Nuxt 應用程式的基本路徑。

例如

  • 類型: string
  • 預設值: "/"

範例:

export default defineNuxtConfig({
  app: {
    baseURL: '/prefix/'
  }
})

範例:

NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs

buildAssetsDir

建置網站資產的資料夾名稱,相對於 baseURL (或如果設定了 cdnURL)。這是於建置時設定的,不應在執行階段自訂。

  • 類型: string
  • 預設值: "/_nuxt/"

cdnURL

一個絕對 URL,用於從中提供公共資料夾 (僅限生產環境)。

例如

  • 類型: string
  • 預設值: ""

範例:

export default defineNuxtConfig({
  app: {
    cdnURL: 'https://mycdn.org/'
  }
})

範例:

NUXT_APP_CDN_URL=https://mycdn.org/ node .output/server/index.mjs

設定每個頁面上 <head> 的預設設定。

  • 類型: object
  • 預設值
{
  "meta": [
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    },
    {
      "charset": "utf-8"
    }
  ],
  "link": [],
  "style": [],
  "script": [],
  "noscript": []
}

範例:

app: {
  head: {
    meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    script: [
      // <script src="https://myawesome-lib.js"></script>
      { src: 'https://awesome-lib.js' }
    ],
    link: [
      // <link rel="stylesheet" href="https://myawesome-lib.css">
      { rel: 'stylesheet', href: 'https://awesome-lib.css' }
    ],
    // please note that this is an area that is likely to change
    style: [
      // <style type="text/css">:root { color: red }</style>
      { children: ':root { color: red }', type: 'text/css' }
    ],
    noscript: [
      // <noscript>JavaScript is required</noscript>
      { children: 'JavaScript is required' }
    ]
  }
}

keepalive

頁面之間 KeepAlive 設定的預設值。

這可以在個別頁面上使用 definePageMeta 覆寫。僅允許使用可 JSON 序列化的值。

  • 類型: boolean
  • 預設值: false

參閱: Vue KeepAlive

layoutTransition

佈局轉換的預設值。

這可以在個別頁面上使用 definePageMeta 覆寫。僅允許使用可 JSON 序列化的值。

  • 類型: boolean
  • 預設值: false

參閱: Vue Transition 文件

pageTransition

頁面轉換的預設值。

這可以在個別頁面上使用 definePageMeta 覆寫。僅允許使用可 JSON 序列化的值。

  • 類型: boolean
  • 預設值: false

參閱: Vue Transition 文件

rootAttrs

自訂 Nuxt 根元素 ID。

  • 類型: object
  • 預設值
{
  "id": "__nuxt"
}

rootId

自訂 Nuxt 根元素 ID。

  • 類型: string
  • 預設值: "__nuxt"

rootTag

自訂 Nuxt 根元素標籤。

  • 類型: string
  • 預設值: "div"

spaLoaderAttrs

自訂 Nuxt SpaLoader 元素屬性。

id

  • 類型: string
  • 預設值: "__nuxt-loader"

spaLoaderTag

自訂 Nuxt SpaLoader 元素標籤。

  • 類型: string
  • 預設值: "div"

teleportAttrs

自訂 Nuxt Teleport 元素屬性。

  • 類型: object
  • 預設值
{
  "id": "teleports"
}

teleportId

自訂 Nuxt Teleport 元素 ID。

  • 類型: string
  • 預設值: "teleports"

teleportTag

自訂 Nuxt Teleport 元素標籤。

  • 類型: string
  • 預設值: "div"

viewTransition

檢視轉換的預設值。

只有當在您的 nuxt.config 檔案中 啟用 View Transitions 的實驗性支援時,這才會生效。這可以在個別頁面上使用 definePageMeta 覆寫。

  • 類型: boolean
  • 預設值: false

參閱: Nuxt 檢視轉換 API 文件

appConfig

其他應用程式設定

為了進行程式化使用和類型支援,您可以透過此選項直接提供應用程式設定。它將會與 app.config 檔案合併為預設值。

nuxt

appId

對於多應用程式專案,Nuxt 應用程式的唯一 ID。

預設為 nuxt-app

  • 類型: string
  • 預設值: "nuxt-app"

build

共用的建置設定。

analyze

Nuxt 允許視覺化您的捆綁包以及如何最佳化它們。

設定為 true 以啟用捆綁包分析,或傳遞具有選項的物件:用於 webpack用於 vite

  • 類型: object
  • 預設值
{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

範例:

analyze: {
  analyzerMode: 'static'
}

templates

您可以提供自己的模板,這些模板將根據 Nuxt 設定呈現。此功能特別適用於模組。

模板使用 lodash/template 呈現。

  • 類型: array

範例:

templates: [
  {
    src: '~/modules/support/plugin.js', // `src` can be absolute or relative
    dst: 'support.js', // `dst` is relative to project `.nuxt` dir
    options: {
      // Options are provided to template as `options` key
      live_chat: false
    }
  }
]

transpile

如果您想要使用 Babel 轉譯特定相依性,您可以在此處新增它們。轉譯中的每個項目都可以是套件名稱、函式、字串或符合相依性檔案名稱的正規表示式物件。

您也可以使用函式來有條件地轉譯。該函式會收到一個物件 ({ isDev, isServer, isClient, isModern, isLegacy })。

  • 類型: array

範例:

transpile: [({ isLegacy }) => isLegacy && 'ky']

buildDir

定義放置建置 Nuxt 檔案的目錄。

許多工具假設 .nuxt 是一個隱藏目錄 (因為它以 . 開頭)。如果這是一個問題,您可以使用此選項來避免這種情況。

  • 類型: string
  • 預設值: "/<rootDir>/.nuxt"

範例:

export default {
  buildDir: 'nuxt-build'
}

buildId

與建置相符的唯一識別碼。這可能包含專案目前狀態的雜湊值。

  • 類型: string
  • 預設值: "f821a3c1-36b1-497c-9729-024dda51b42b"

builder

用於捆綁應用程式 Vue 部分的建構器。

  • 類型: string
  • 預設值: "@nuxt/vite-builder"

compatibilityDate

指定應用程式的相容性日期。

此設定用於控制 Nitro、Nuxt Image 和其他模組中預設值的行為,這些模組可能會在沒有主要版本更新的情況下改變行為。我們計劃在未來改進此功能相關的工具。

components

設定 Nuxt 元件的自動註冊。

在此設定中配置的目錄中的任何元件,都可以在您的頁面、佈局(和其他元件)中使用,而無需明確導入它們。

  • 類型: object
  • 預設值
{
  "dirs": [
    {
      "path": "~/components/global",
      "global": true
    },
    "~/components"
  ]
}

參閱components/ 目錄文件

css

您可以定義想要全域設定的 CSS 檔案/模組/函式庫(包含在每個頁面中)。

Nuxt 會根據副檔名自動判斷檔案類型,並使用適當的預處理器。如果需要使用它們,您仍然需要安裝所需的載入器。

  • 類型: array

範例:

css: [
  // Load a Node.js module directly (here it's a Sass file).
  'bulma',
  // CSS file in the project
  '~/assets/css/main.css',
  // SCSS file in the project
  '~/assets/css/main.scss'
]

debug

設定為 true 以啟用偵錯模式。

目前,它會在伺服器上印出 Hook 名稱和時間,並在瀏覽器中記錄 Hook 引數。

  • 類型: boolean
  • 預設值: false

dev

Nuxt 是否正在開發模式下執行。

一般來說,您不需要設定此項。

  • 類型: boolean
  • 預設值: false

devServer

host

開發伺服器監聽的主機

https

是否啟用 HTTPS。

  • 類型: boolean
  • 預設值: false

範例:

export default defineNuxtConfig({
  devServer: {
    https: {
      key: './server.key',
      cert: './server.crt'
    }
  }
})

loadingTemplate

顯示載入畫面的範本

  • 類型function

port

開發伺服器監聽的埠

  • 類型number
  • 預設值: 3000

url

監聽開發伺服器的 URL。

由於此值會始終被開發伺服器以完整 URL 覆蓋(用於模組和內部使用),因此不應直接設定。

  • 類型: string
  • 預設值: "https://127.0.0.1:3000"

devServerHandlers

僅限 Nitro 開發的伺服器處理器。

  • 類型: array

參閱Nitro 伺服器路由文件

devtools

啟用 Nuxt DevTools 進行開發。

DevTools 的重大變更可能不會反映在 Nuxt 版本上。

參閱Nuxt DevTools 以取得更多資訊。

dir

自訂 Nuxt 使用的預設目錄結構。

除非必要,否則最好堅持使用預設值。

app

  • 類型: string
  • 預設值: "app"

assets

資源目錄(在您的建置中別名為 ~assets)。

  • 類型: string
  • 預設值: "assets"

layouts

佈局目錄,其中的每個檔案都會自動註冊為 Nuxt 佈局。

  • 類型: string
  • 預設值: "layouts"

middleware

中介層目錄,其中的每個檔案都會自動註冊為 Nuxt 中介層。

  • 類型: string
  • 預設值: "middleware"

modules

模組目錄,其中的每個檔案都會自動註冊為 Nuxt 模組。

  • 類型: string
  • 預設值: "modules"

pages

將被處理以自動產生應用程式頁面路由的目錄。

  • 類型: string
  • 預設值: "pages"

plugins

外掛程式目錄,其中的每個檔案都會自動註冊為 Nuxt 外掛程式。

  • 類型: string
  • 預設值: "plugins"

public

包含您的靜態檔案的目錄,這些檔案可透過 Nuxt 伺服器直接存取,並在產生應用程式時複製到您的 dist 資料夾中。

  • 類型: string
  • 預設值: "public"

shared

共用目錄。此目錄在應用程式和伺服器之間共用。

  • 類型: string
  • 預設值: "shared"

static

  • 類型: string
  • 預設值: "public"

experimental

appManifest

使用應用程式清單來遵循用戶端上的路由規則。

  • 類型: boolean
  • 預設值: true

asyncContext

啟用原生非同步內容,以便巢狀組合式函式存取

  • 類型: boolean
  • 預設值: false

參閱Nuxt PR #20918

asyncEntry

設定為 true 以為 Vue 套件產生非同步進入點(用於模組聯邦支援)。

  • 類型: boolean
  • 預設值: false

browserDevtoolsTiming

在基於 Chromium 的瀏覽器的效能面板中啟用 Nuxt 應用程式 Hook 的時間。

  • 類型: boolean
  • 預設值: false

參閱Chrome DevTools 擴充性 API

buildCache

根據組態和原始檔的雜湊值快取 Nuxt/Nitro 建置成品。

這僅適用於應用程式 Vue/Nitro 部分中 srcDirserverDir 內的原始檔。

  • 類型: boolean
  • 預設值: false

checkOutdatedBuildInterval

設定檢查新建置的時間間隔(以毫秒為單位)。當 experimental.appManifestfalse 時停用。

設定為 false 以停用。

  • 類型number
  • 預設值: 3600000

clientFallback

是否啟用實驗性的 <NuxtClientFallback> 元件,以便在 SSR 中發生錯誤時在用戶端上呈現內容。

  • 類型: boolean
  • 預設值: false

clientNodeCompat

使用 unenv 自動在用戶端建置中填補 Node.js 導入。

  • 類型: boolean
  • 預設值: false

參閱unenv

compileTemplate

是否使用 lodash.template 來編譯 Nuxt 範本。

此標誌將在 v4 版本發佈時移除,並且僅適用於 Nuxt v3.12+ 或在夜間發佈通道中進行進階測試。

  • 類型: boolean
  • 預設值: true

componentIslands

使用 <NuxtIsland>.island.vue 檔案的實驗性元件島嶼支援。

預設情況下,它設定為 'auto',這表示它僅在應用程式中存在島嶼、伺服器元件或伺服器頁面時才會啟用。

  • 類型: string
  • 預設值: "auto"

configSchema

組態綱要支援

  • 類型: boolean
  • 預設值: true

參閱Nuxt Issue #15592

cookieStore

啟用 CookieStore 支援以監聽 Cookie 更新(如果瀏覽器支援)並重新整理 useCookie ref 值。

  • 類型: boolean
  • 預設值: true

參閱CookieStore

crossOriginPrefetch

使用 Speculation Rules API 啟用跨來源預先擷取。

  • 類型: boolean
  • 預設值: false

defaults

這允許指定核心 Nuxt 元件和組合式函式的預設選項。

這些選項可能會在未來移至其他地方,例如 app.configapp/ 目錄中。

componentName
  • 類型: string
  • 預設值: "NuxtLink"
prefetch
  • 類型: boolean
  • 預設值: true
prefetchOn
visibility
  • 類型: boolean
  • 預設值: true

useAsyncData

適用於 useAsyncData (因此也適用於 useFetch)的選項

deep
  • 類型: boolean
  • 預設值: true
errorValue
  • 類型: string
  • 預設值: "null"
value
  • 類型: string
  • 預設值: "null"

useFetch

emitRouteChunkError

當載入 vite/webpack 區塊發生錯誤時,發出 app:chunkError hook。

預設情況下,當導覽至新路由時,如果區塊載入失敗,Nuxt 也會執行新路由的重新載入(automatic)。設定 automatic-immediate 會導致 Nuxt 在區塊載入失敗時立即重新載入目前路由(而不是等待導覽)。您可以將此設定為 false 以停用自動處理,或將其設定為 manual 以手動處理區塊錯誤。

  • 類型: string
  • 預設值: "automatic"

參閱Nuxt PR #19038

externalVue

在建置時將 vue@vue/*vue-router 外部化。

  • 類型: boolean
  • 預設值: true

參閱Nuxt Issue #13632

extraPageMetaExtractionKeys

設定在使用 scanPageMeta 時要從頁面中繼資料中擷取的其他鍵。

這允許模組從頁面中繼資料存取其他中繼資料。建議使用您的鍵來擴充 NuxtPage 類型。

  • 類型: array

headNext

使用新的實驗性 head 優化

  • 新增 capo.js head 外掛程式,以便以更高效能的方式呈現 head 中的標籤。- 使用雜湊水合外掛程式來減少初始水合作用
  • 類型: boolean
  • 預設值: true

參閱Nuxt Discussion #22632

inlineRouteRules

允許直接在您的 ~/pages 目錄中使用 defineRouteRules 來定義 routeRules

規則會轉換(根據路徑)並應用於伺服器請求。例如,在 ~/pages/foo/bar.vue 中定義的規則會應用於 /foo/bar 請求。在 ~/pages/foo/[id].vue 中的規則會應用於 /foo/** 請求。為了獲得更多控制權,例如您在頁面的 definePageMeta 中使用自訂的 pathalias 設定,您應該直接在 nuxt.config 中設定 routeRules

  • 類型: boolean
  • 預設值: false

localLayerAliases

解析位於圖層內的 ~~~@@@ 別名,使其與其圖層來源和根目錄相關。

  • 類型: boolean
  • 預設值: true

在導覽之前等待單一動畫影格,這讓瀏覽器有機會重新繪製,以確認使用者互動。

在預先呈現的路由上導覽時,它可以減少 INP。

  • 類型: boolean
  • 預設值: true

noVueServer

停用 nitro 內的 vue 伺服器呈現器端點。

  • 類型: boolean
  • 預設值: false

normalizeComponentNames

確保自動產生的 Vue 元件名稱與您用於自動匯入元件的完整元件名稱相符。

  • 類型: boolean
  • 預設值: false

payloadExtraction

當啟用此選項(預設)時,會擷取預先呈現的頁面的酬載

  • 類型: boolean
  • 預設值: true

polyfillVueUseHead

是否要為依賴舊 @vueuse/head API 的模組、外掛程式或使用者程式碼新增相容性層。

停用此選項可將用戶端套件減少約 0.5kb。

  • 類型: boolean
  • 預設值: false

relativeWatchPaths

是否在 builder:watch hook 中提供相對路徑。

此標誌將在 v4 版本發佈時移除,並且僅適用於 Nuxt v3.12+ 或在夜間發佈通道中進行進階測試。

  • 類型: boolean
  • 預設值: true

renderJsonPayloads

呈現 JSON 酬載,並支援還原複雜類型。

  • 類型: boolean
  • 預設值: true

resetAsyncDataToUndefined

clearclearNuxtData 是否應將非同步資料重設為其預設值,或將其更新為 null/undefined

  • 類型: boolean
  • 預設值: true

respectNoSSRHeader

允許透過設定 x-nuxt-no-ssr 標頭來停用 Nuxt SSR 回應。

  • 類型: boolean
  • 預設值: false

restoreState

在區塊錯誤或手動 reloadNuxtApp() 呼叫後重新載入頁面時,是否從 sessionStorage 還原 Nuxt 應用程式狀態。

為避免水合錯誤,它將僅在 Vue 應用程式已掛載後套用,這表示在初始載入時可能會出現閃爍。在啟用此選項之前請仔細考慮,因為它可能會導致非預期的行為,並考慮為 useState 提供明確的鍵,因為自動產生的鍵在不同建置之間可能不符。

  • 類型: boolean
  • 預設值: false

scanPageMeta

允許在建置時向模組公開在 definePageMeta 中定義的一些路由中繼資料(別名、名稱、路徑、重新導向)。

這僅適用於靜態或字串/陣列,而不是變數或條件式指派。

  • 類型: boolean
  • 預設值: true

參閱Nuxt Issues #24770

sharedPrerenderData

自動在預先渲染的頁面之間共享 payload data。當預先渲染使用 useAsyncDatauseFetch 且在不同頁面中提取相同資料的網站時,這可以顯著提升效能。

啟用此功能時,請務必確保資料的任何唯一鍵都始終能解析為相同的資料。例如,如果您使用 useAsyncData 提取與特定頁面相關的資料,則應提供一個與該資料唯一匹配的鍵。(useFetch 應自動為您執行此操作。)

  • 類型: boolean
  • 預設值: false

範例:

// This would be unsafe in a dynamic page (e.g. `[slug].vue`) because the route slug makes a difference
// to the data fetched, but Nuxt can't know that because it's not reflected in the key.
const route = useRoute()
const { data } = await useAsyncData(async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})
// Instead, you should use a key that uniquely identifies the data fetched.
const { data } = await useAsyncData(route.params.slug, async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})

spaLoadingTemplateLocation

持續顯示 spa-loading-template,直到 suspense:resolve

  • 類型: string
  • 預設值: "within"

參見Nuxt Issues #24770

templateRouteInjection

預設情況下,自動導入的 useRoute() composable 所回傳的 route 物件,會與 <NuxtPage> 中目前檢視的頁面保持同步。這對於 vue-router 匯出的 useRoute 或 Vue 範本中可用的預設 $route 物件則不適用。

啟用此選項後,將會注入一個 mixin,使 $route 範本物件與 Nuxt 管理的 useRoute() 保持同步。

  • 類型: boolean
  • 預設值: true

templateUtils

在編譯 Nuxt 範本時,是否提供舊版的 templateUtils 物件(包含 serializeimportNameimportSources)。

此標誌將在 v4 版本發佈時移除,並且僅適用於 Nuxt v3.12+ 或在夜間發佈通道中進行進階測試。

  • 類型: boolean
  • 預設值: true

treeshakeClientOnly

從伺服器 bundle 中移除僅限客戶端元件的內容。

  • 類型: boolean
  • 預設值: true

參見Nuxt PR #5750

typedPages

使用 unplugin-vue-router 啟用新的實驗性類型化路由器。

  • 類型: boolean
  • 預設值: false

viewTransition

啟用與客戶端路由器整合的 View Transition API。

  • 類型: boolean
  • 預設值: false

參見View Transitions API

watcher

設定一個替代的監看器,將其用作 Nuxt 的監看服務。

如果您的原始碼目錄與根目錄相同,Nuxt 會使用 'chokidar-granular'。這會忽略頂層目錄(例如 node_modules.git),這些目錄會排除在監看範圍之外。您可以將此設定為 parcel 以使用 @parcel/watcher,這可能會提高大型專案或 Windows 平台上的效能。您也可以將此設定為 chokidar 以監看原始碼目錄中的所有檔案。

  • 類型: string
  • 預設值: "chokidar"

參見chokidar

參見@parcel/watcher

writeEarlyHints

使用 node 伺服器時寫入 early hints。

  • 類型: boolean
  • 預設值: false
注意:nginx 目前版本不支援 103 Early hints。

extends

從多個本機或遠端來源延伸專案。

值應為指向原始碼目錄或相對於目前設定檔的路徑的字串或字串陣列。您可以使用 github:gh:gitlab:bitbucket:

  • 預設值: null

參見c12 關於延伸設定層的說明文件

參見giget 說明文件

extensions

應由 Nuxt 解析器解析的副檔名。

  • 類型: array
  • 預設值
[
  ".js",
  ".jsx",
  ".mjs",
  ".ts",
  ".tsx",
  ".vue"
]

features

Nuxt 的某些功能可以選擇性啟用,或根據您的需求停用。

devLogs

在您開發時,將伺服器日誌串流至客戶端。這些日誌可以在 dev:ssr-logs hook 中處理。

如果設定為 silent,則日誌不會列印到瀏覽器主控台。

  • 類型: boolean
  • 預設值: false

inlineStyles

在渲染 HTML 時內嵌樣式(目前僅限 vite)。

您也可以傳遞一個函式,該函式會接收 Vue 元件的路徑,並回傳一個布林值,指出是否內嵌該元件的樣式。

  • 類型: boolean
  • 預設值: true

noScripts

關閉 Nuxt script 和 JS 資源提示的渲染。您也可以在 routeRules 中更精細地停用 script。

  • 類型: boolean
  • 預設值: false

future

future 用於提早選擇加入將在未來(可能主要)版本的框架中成為預設的新功能。

compatibilityVersion

啟用對 Nuxt v4 功能或標記的提早存取。

compatibilityVersion 設定為 4 會變更整個 Nuxt 設定中的預設值,但您可以在測試時精細地重新啟用 Nuxt v3 的行為(請參閱範例)。如果發生這種情況,請提出問題,以便我們可以在 Nuxt 或生態系統中解決。

  • 類型number
  • 預設值: 3

範例:

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // To re-enable _all_ Nuxt v3 behaviour, set the following options:
  srcDir: '.',
  dir: {
    app: 'app'
  },
  experimental: {
    compileTemplate: true,
    templateUtils: true,
    relativeWatchPaths: true,
    resetAsyncDataToUndefined: true,
    defaults: {
      useAsyncData: {
        deep: true
      }
    }
  },
  unhead: {
    renderSSRHeadOptions: {
      omitLineBreaks: false
    }
  }
})

multiApp

這啟用對實驗性多應用程式支援的提早存取。

  • 類型: boolean
  • 預設值: false

參見Nuxt Issue #21635

typescriptBundlerResolution

這啟用 TypeScript 的「Bundler」模組解析模式,這是 Nuxt 和 Vite 等框架的建議設定。

在使用具有 exports 的現代函式庫時,這會改善類型支援。您可以將其設定為 false 以使用舊版的「Node」模式,這是 TypeScript 的預設值。

  • 類型: boolean
  • 預設值: true

參見實作 bundler 模組解析的 TypeScript PR

generate

exclude

不再使用此選項。請改用 nitro.prerender.ignore

  • 類型: array

routes

要產生的路由。

如果您使用爬蟲程式,這將只是路由產生的起點。當使用動態路由時,這通常是必要的。建議使用 nitro.prerender.routes

  • 類型: array

範例:

routes: ['/users/1', '/users/2', '/users/3']

hooks

Hook 是 Nuxt 事件的監聽器,通常在模組中使用,但也適用於 nuxt.config

在內部,hook 遵循使用冒號的命名模式(例如,build:done)。為了方便設定,您也可以在 nuxt.config 中將其建構為階層式物件(如下所示)。

  • 預設值: null

範例:

import fs from 'node:fs'
import path from 'node:path'
export default {
  hooks: {
    build: {
      done(builder) {
        const extraFilePath = path.join(
          builder.nuxt.options.buildDir,
          'extra-file'
        )
        fs.writeFileSync(extraFilePath, 'Something extra')
      }
    }
  }
}

ignore

ignorePrefix 更可自訂:所有符合 ignore 陣列中指定的 glob 模式的檔案,在建置時都會被忽略。

  • 類型: array
  • 預設值
[
  "**/*.stories.{js,cts,mts,ts,jsx,tsx}",
  "**/*.{spec,test}.{js,cts,mts,ts,jsx,tsx}",
  "**/*.d.{cts,mts,ts}",
  "**/.{pnpm-store,vercel,netlify,output,git,cache,data}",
  ".nuxt/analyze",
  ".nuxt",
  "**/-*.*"
]

ignoreOptions

將選項直接傳遞至 node-ignore(Nuxt 用來忽略檔案)。

參見node-ignore

範例:

ignoreOptions: {
  ignorecase: false
}

ignorePrefix

如果 pages/layouts/middleware/public/ 目錄中的任何檔案的檔名以 ignorePrefix 指定的前置詞開頭,則在建置過程中會被忽略。這旨在防止在已建置的應用程式中處理或提供某些檔案。預設情況下,ignorePrefix 設定為 '-',忽略任何以 '-' 開頭的檔案。

  • 類型: string
  • 預設值: "-"

imports

設定 Nuxt 如何將 composable 自動匯入您的應用程式。

參見Nuxt 說明文件

dirs

將自動匯入的自訂目錄陣列。請注意,此選項不會覆寫預設目錄(~/composables、~/utils)。

  • 類型: array

範例:

imports: {
  // Auto-import pinia stores defined in `~/stores`
  dirs: ['stores']
}

global

  • 類型: boolean
  • 預設值: false

scan

是否掃描您的 composables/utils/ 目錄以自動匯入 composable。由 Nuxt 或其他模組註冊的自動匯入,例如來自 vuenuxt 的匯入,仍會啟用。

  • 類型: boolean
  • 預設值: true

logLevel

建置日誌時的日誌層級。

在 CI 中執行或沒有 TTY 時,預設為 'silent'。然後此選項在 Vite 中用作 'silent',在 Webpack 中用作 'none'

  • 類型: string
  • 預設值: "info"

modules

模組是 Nuxt 擴充功能,可以擴充其核心功能並新增無止盡的整合。

每個模組都是字串(可以參照套件,或作為檔案的路徑)、以模組作為第一個字串和選項作為第二個物件的元組,或內嵌的模組函式。Nuxt 嘗試使用 node require 路徑(在 node_modules 中)解析 modules 陣列中的每個項目,然後如果使用 ~ 別名,則會從專案 srcDir 解析。

  • 類型: array
注意:模組會依序執行,因此順序很重要。首先,會載入 nuxt.config.ts 中定義的模組。然後,會執行在 modules/ 目錄中找到的模組,並依字母順序載入。

範例:

modules: [
  // Using package name
  '@nuxtjs/axios',
  // Relative to your project srcDir
  '~/modules/awesome.js',
  // Providing options
  ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  // Inline definition
  function () {}
]

modulesDir

用於設定路徑解析的模組目錄(例如,webpack 的 resolveLoadingnodeExternalspostcss)。

設定路徑相對於 options.rootDir(預設值為目前工作目錄)。如果您的專案是組織為 yarn workspace 樣式的單一儲存庫,則可能需要設定此欄位。

  • 類型: array
  • 預設值
[
  "/<rootDir>/node_modules"
]

範例:

export default {
  modulesDir: ['../../node_modules']
}

nitro

Nitro 的設定。

參見Nitro 設定說明文件

routeRules

  • 類型: object

runtimeConfig

  • 類型: object
  • 預設值
{
  "public": {},
  "app": {
    "buildId": "f821a3c1-36b1-497c-9729-024dda51b42b",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  },
  "nitro": {
    "envPrefix": "NUXT_"
  }
}

optimization

建置時間最佳化設定。

asyncTransforms

直接從 unctx 傳遞至轉換器的選項,該選項會在 await 後保留非同步內容。

asyncFunctions

  • 類型: array
  • 預設值
[
  "defineNuxtPlugin",
  "defineNuxtRouteMiddleware"
]

objectDefinitions

defineNuxtComponent
  • 類型: array
  • 預設值
[
  "asyncData",
  "setup"
]
defineNuxtPlugin
  • 類型: array
  • 預設值
[
  "setup"
]
definePageMeta
  • 類型: array
  • 預設值
[
  "middleware",
  "validate"
]

keyedComposables

要注入鍵的函式。

只要傳遞至函式的引數數量小於 argumentLength,就會注入一個額外的 magic 字串,可用於消除伺服器和客戶端之間的重複請求。您需要採取步驟來處理此額外的鍵。該鍵將根據檔案中呼叫函式的位置而唯一。

  • 類型: array
  • 預設值
[
  {
    "name": "callOnce",
    "argumentLength": 3
  },
  {
    "name": "defineNuxtComponent",
    "argumentLength": 2
  },
  {
    "name": "useState",
    "argumentLength": 2
  },
  {
    "name": "useFetch",
    "argumentLength": 3
  },
  {
    "name": "useAsyncData",
    "argumentLength": 3
  },
  {
    "name": "useLazyAsyncData",
    "argumentLength": 3
  },
  {
    "name": "useLazyFetch",
    "argumentLength": 3
  }
]

treeShake

從特定建置中移除程式碼。

composables

從伺服器或客戶端建置中移除 composable。

範例:

treeShake: { client: { myPackage: ['useServerOnlyComposable'] } }
client
  • 類型: object
  • 預設值
{
  "vue": [
    "onRenderTracked",
    "onRenderTriggered",
    "onServerPrefetch"
  ],
  "#app": [
    "definePayloadReducer",
    "definePageMeta",
    "onPrehydrate"
  ]
}
server
  • 類型: object
  • 預設值
{
  "vue": [
    "onMounted",
    "onUpdated",
    "onUnmounted",
    "onBeforeMount",
    "onBeforeUpdate",
    "onBeforeUnmount",
    "onRenderTracked",
    "onRenderTriggered",
    "onActivated",
    "onDeactivated"
  ],
  "#app": [
    "definePayloadReviver",
    "definePageMeta"
  ]
}

pages

是否在 Nuxt 3 中使用 vue-router 整合。如果您未提供值,則當您的原始碼資料夾中有 pages/ 目錄時,將會啟用。

  • 類型: boolean

plugins

Nuxt 應用程式外掛程式的陣列。

每個外掛程式都可以是字串(可以是檔案的絕對或相對路徑)。如果它以 .client.server 結尾,則會自動僅在適當的內容中載入。它也可以是具有 srcmode 鍵的物件。

  • 類型: array
注意:也會從 ~/plugins 目錄自動註冊外掛程式,而且這些外掛程式不需要列在 nuxt.config 中,除非您需要自訂其順序。所有外掛程式都會依其 src 路徑進行重複資料刪除。

參見plugins/ 目錄說明文件

範例:

plugins: [
  '~/plugins/foo.client.js', // only in client side
  '~/plugins/bar.server.js', // only in server side
  '~/plugins/baz.js', // both client & server
  { src: '~/plugins/both-sides.js' },
  { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
  { src: '~/plugins/server-only.js', mode: 'server' } // only on server side
]

postcss

order

PostCSS 外掛程式的排序策略。

  • 類型function

plugins

用於設定 PostCSS 外掛程式的選項。

參見PostCSS 說明文件

autoprefixer

用於解析 CSS 並將供應商前置詞新增至 CSS 規則的外掛程式。

參見autoprefixer

cssnano

  • 類型: object

參見cssnano 設定選項

rootDir

定義您應用程式的根目錄。

可以覆寫此屬性(例如,執行 nuxt ./my-app/ 會將 rootDir 設定為目前/工作目錄中 ./my-app/ 的絕對路徑。通常不需要設定此選項。

  • 類型: string
  • 預設值: "<rootDir>/"

routeRules

全域路由選項會套用至符合的伺服器路由。

實驗性功能:這是一個實驗性功能,API 未來可能會變更。

請參閱Nitro 路由規則文件

router

選項

傳遞至 vue-router 的其他路由選項。除了 vue-router 的選項外,Nuxt 還提供額外的選項來自訂路由 (請見下方)。

注意:只有可序列化為 JSON 的選項才能透過 Nuxt 設定檔傳遞。若要進行更精細的控制,可以使用 app/router.options.ts 檔案。

請參閱Vue Router 文件

hashMode

您可以在 SPA 模式中啟用雜湊歷史記錄。在此模式下,路由會在內部傳遞的實際 URL 前使用雜湊字元 (#)。啟用後,URL 永遠不會傳送到伺服器,且不支援 SSR

  • 類型: boolean
  • 預設值: false

預設值:false

scrollBehaviorType

自訂雜湊連結的捲動行為。

  • 類型: string
  • 預設值: "auto"

預設值:'auto'

runtimeConfig

執行階段設定允許將動態設定和環境變數傳遞至 Nuxt 應用程式環境。

只有伺服器可以使用 useRuntimeConfig 存取此物件的值。它主要應該包含 私有 設定,這些設定不會暴露在前端。這可能包含對 API 金鑰的參考。 publicapp 底下的任何內容也會暴露給前端。這些值會在執行階段自動被符合的環境變數取代,例如,設定環境變數 NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ 會覆寫下方範例中的兩個值。

  • 類型: object
  • 預設值
{
  "public": {},
  "app": {
    "buildId": "f821a3c1-36b1-497c-9729-024dda51b42b",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

範例:

export default {
 runtimeConfig: {
    apiKey: '', // Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEY
    public: {
       baseURL: '' // Exposed to the frontend as well.
    }
  }
}

serverDir

定義 Nuxt 應用程式的伺服器目錄,其中保留 Nitro 路由、中介軟體和外掛程式。

如果指定相對路徑,它將會相對於您的 rootDir

  • 類型: string
  • 預設值: "/<srcDir>/server"

serverHandlers

Nitro 伺服器處理常式。

每個處理常式都接受下列選項

  • handler: 定義處理常式檔案的路徑。 - route: 處理常式可用的路由。這遵循 rou3 的慣例。 - method: 應該處理的請求的 HTTP 方法。 - middleware: 指定它是否為中介軟體處理常式。 - lazy: 指定是否使用延遲載入來匯入處理常式。
  • 類型: array

請參閱server/ 目錄文件

注意:Nuxt 會自動註冊來自 server/apiserver/middlewareserver/routes 的檔案。

範例:

serverHandlers: [
  { route: '/path/foo/**:name', handler: '~/server/foohandler.ts' }
]

sourcemap

設定是否為伺服器和/或用戶端套件產生原始程式碼對應,以及如何產生。

如果設定為單一布林值,則該值會同時套用至伺服器和用戶端。此外,'hidden' 選項也可用於伺服器和用戶端。伺服器和用戶端的可用選項: - true:產生原始程式碼對應,並在最終套件中包含來源參考。 - false:不會產生任何原始程式碼對應。 - 'hidden':產生原始程式碼對應,但不會在最終套件中包含參考。

  • 類型: object
  • 預設值
{
  "server": true,
  "client": false
}

spaLoadingTemplate

布林值或 HTML 檔案的路徑,其內容將插入使用 ssr: false 呈現的任何 HTML 頁面。

  • 如果未設定,則會使用您其中一個圖層中的 ~/app/spa-loading-template.html 檔案 (如果存在)。 - 如果為 false,則不會載入任何 SPA 載入指示器。 - 如果為 true,Nuxt 會在您其中一個圖層中尋找 ~/app/spa-loading-template.html 檔案,否則會使用預設的 Nuxt 影像。旋轉器的良好來源包括 SpinKitSVG Spinners
  • 預設值: null

範例:~/app/spa-loading-template.html

<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
<div class="loader"></div>
<style>
.loader {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #000;
  border-left-color: #000;
  border-bottom-color: #efefef;
  border-right-color: #efefef;
  border-radius: 50%;
  -webkit-animation: loader 400ms linear infinite;
  animation: loader 400ms linear infinite;
}

\@-webkit-keyframes loader {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
  }
}
\@keyframes loader {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>

srcDir

定義 Nuxt 應用程式的來源目錄。

如果指定相對路徑,則它會相對於 rootDir

  • 類型: string
  • 預設值: "/<srcDir>"

範例:

export default {
  srcDir: 'src/'
}

這會與下列資料夾結構搭配運作

-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| src/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| public/
------| store/
------| server/
------| app.config.ts
------| app.vue
------| error.vue

ssr

是否啟用 HTML 呈現 - 動態 (在伺服器模式中) 或在產生時間。如果設定為 false,則產生的頁面將不會有任何內容。

  • 類型: boolean
  • 預設值: true

telemetry

手動停用 Nuxt 遙測。

請參閱Nuxt 遙測 以取得更多資訊。

test

您的應用程式是否正在進行單元測試。

  • 類型: boolean
  • 預設值: false

theme

從本機或遠端來源擴充專案。

值應該是指向來源目錄或相對於目前設定檔的設定檔路徑的字串。您可以使用 github:gitlab:bitbucket:https:// 從遠端 Git 儲存庫擴充。

  • 類型: string
  • 預設值: null

typescript

Nuxt TypeScript 整合的設定。

builder

要為您的專案包含哪些建置器類型。

根據預設,Nuxt 會根據您的 builder 選項 (預設為 'vite') 推斷此選項,但您可以關閉建置器環境類型 (使用 false) 以完全自行處理,或選擇 'shared' 選項。建議模組作者使用 'shared' 選項,他們會想要支援多個可能的建置器。

  • 預設值: null

hoist

要在 compilerOptions.paths 中產生深度別名的模組。這目前不支援子路徑。當在具有 shamefully-hoist=false 的 pnpm 單一儲存庫中使用 Nuxt 時,可能需要使用此選項。

  • 類型: array
  • 預設值
[
  "nitropack/types",
  "nitropack/runtime",
  "nitropack",
  "defu",
  "h3",
  "consola",
  "ofetch",
  "@unhead/vue",
  "@nuxt/devtools",
  "vue",
  "@vue/runtime-core",
  "@vue/compiler-sfc",
  "vue-router",
  "vue-router/auto-routes",
  "unplugin-vue-router/client",
  "@nuxt/schema",
  "nuxt"
]

includeWorkspace

在 Nuxt 專案中包含父工作區。對主題和模組作者最有用。

  • 類型: boolean
  • 預設值: false

shim

產生 *.vue 墊片。

我們建議讓 官方 Vue 擴充功能 為您的元件產生精確的類型。請注意,如果您使用其他程式庫 (例如 ESLint),而這些程式庫無法理解 .vue 檔案的類型,則可能需要將此選項設定為 true

  • 類型: boolean
  • 預設值: false

strict

TypeScript 提供某些檢查,讓您更安全地分析程式。一旦將程式碼庫轉換為 TypeScript,就可以開始啟用這些檢查,以提高安全性。深入了解

  • 類型: boolean
  • 預設值: true

tsConfig

您可以使用此選項擴充產生的 .nuxt/tsconfig.json

  • 類型: object
  • 預設值
{
  "compilerOptions": {}
}

typeCheck

啟用建置時類型檢查。

如果設定為 true,這將在開發期間執行類型檢查。您可以將其設定為 build,將此選項限制為建置時類型檢查。需要將 typescriptvue-tsc 安裝為開發相依性。

  • 類型: boolean
  • 預設值: false

請參閱Nuxt TypeScript 文件

unhead

一個物件,可讓我們設定 unhead nuxt 模組。

renderSSRHeadOptions

將傳遞至 renderSSRHead 的物件,以自訂輸出。

  • 類型: object
  • 預設值
{
  "omitLineBreaks": false
}

請參閱unhead 選項文件

範例:

export default defineNuxtConfig({
 unhead: {
  renderSSRHeadOptions: {
   omitLineBreaks: true
  }
})

vite

將直接傳遞至 Vite 的設定。

請參閱Vite 設定文件 以取得更多資訊。請注意,並非所有 Vite 選項都支援 Nuxt。

build

assetsDir

  • 類型: string
  • 預設值: "_nuxt/"

emptyOutDir

  • 類型: boolean
  • 預設值: false

cacheDir

  • 類型: string
  • 預設值: "/<rootDir>/node_modules/.cache/vite"

clearScreen

  • 類型: boolean
  • 預設值: true

define

  • 類型: object
  • 預設值
{
  "__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": false,
  "process.dev": false,
  "import.meta.dev": false,
  "process.test": false,
  "import.meta.test": false
}

esbuild

jsxFactory

  • 類型: string
  • 預設值: "h"

jsxFragment

  • 類型: string
  • 預設值: "Fragment"

tsconfigRaw

  • 類型: string
  • 預設值: "{}"

mode

  • 類型: string
  • 預設值: "production"

optimizeDeps

exclude

  • 類型: array
  • 預設值
[
  "vue-demi"
]

publicDir

  • 類型: boolean
  • 預設值: false

resolve

extensions

  • 類型: array
  • 預設值
[
  ".mjs",
  ".js",
  ".ts",
  ".jsx",
  ".tsx",
  ".json",
  ".vue"
]

root

  • 類型: string
  • 預設值: "/<srcDir>"

server

fs

allow
  • 類型: array
  • 預設值
[
  "/<rootDir>/.nuxt",
  "/<srcDir>",
  "/<rootDir>",
  "/<workspaceDir>",
  "/<rootDir>/node_modules"
]

vue

features

propsDestructure
  • 類型: boolean
  • 預設值: true

isProduction

  • 類型: boolean
  • 預設值: true

script

hoistStatic

template

compilerOptions
  • 類型: object
transformAssetUrls
  • 類型: object
  • 預設值
{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

vueJsx

  • 類型: object

vue

Vue.js 設定

compilerOptions

將在建置時間傳遞的 Vue 編譯器選項。

請參閱Vue 文件

config

可以全域設定 Vue 應用程式。只有可序列化的選項可以在您的 nuxt.config 中設定。所有其他選項都應該在執行階段於 Nuxt 外掛程式中設定。

請參閱Vue 應用程式設定文件

propsDestructure

defineProps 啟用反應式解構

  • 類型: boolean
  • 預設值: true

runtimeCompiler

在執行階段套件中包含 Vue 編譯器。

  • 類型: boolean
  • 預設值: false

transformAssetUrls

image

  • 類型: array
  • 預設值
[
  "xlink:href",
  "href"
]

img

  • 類型: array
  • 預設值
[
  "src"
]

source

  • 類型: array
  • 預設值
[
  "src"
]

use

  • 類型: array
  • 預設值
[
  "xlink:href",
  "href"
]

video

  • 類型: array
  • 預設值
[
  "src",
  "poster"
]

watch

當變更時,「watch」屬性可讓您定義將重新啟動 Nuxt 開發伺服器的模式。

它是一個字串或規則運算式的陣列。字串應該是絕對路徑或相對於 srcDir (以及任何圖層的 srcDir) 的相對路徑。規則運算式會針對相對於專案 srcDir (以及任何圖層的 srcDir) 的路徑進行比對。

  • 類型: array

watchers

「watchers」屬性可讓您覆寫 nuxt.config 中的監看員設定。

chokidar

直接傳遞至 chokidar 的選項。

請參閱chokidar

ignoreInitial

  • 類型: boolean
  • 預設值: true

rewatchOnRawEvents

事件類型的陣列,當收到這些類型時,會導致監看員重新啟動。

webpack

直接傳遞至 webpack 的 watchOptions

請參閱webpack@4 監看選項

aggregateTimeout

  • 類型number
  • 預設值: 1000

webpack

aggressiveCodeRemoval

硬式取代 typeof processtypeof windowtypeof document 以進行 tree-shake 套件。

  • 類型: boolean
  • 預設值: false

analyze

Nuxt 使用 webpack-bundle-analyzer 來視覺化您的套件,以及如何最佳化它們。

設定為 true 以啟用捆綁包分析,或傳遞具有選項的物件:用於 webpack用於 vite

  • 類型: object
  • 預設值
{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

範例:

analyze: {
  analyzerMode: 'static'
}

cssSourceMap

啟用 CSS 原始程式碼對應支援 (在開發中預設為 true)。

  • 類型: boolean
  • 預設值: false

devMiddleware

請參閱 webpack-dev-middleware 以取得可用的選項。

stats

  • 類型: string
  • 預設值: "none"

experiments

設定 webpack 實驗

extractCSS

啟用通用 CSS 擷取。

在幕後使用 mini-css-extract-plugin,您的 CSS 會被擷取到個別檔案中,通常每個元件一個檔案。這允許分別快取您的 CSS 和 JavaScript。

  • 類型: boolean
  • 預設值: true

範例:

export default {
  webpack: {
    extractCSS: true,
    // or
    extractCSS: {
      ignoreOrder: true
    }
  }
}

範例:

export default {
  webpack: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}

filenames

自訂套件檔案名稱。

若要深入了解資訊清單的使用,請查看 webpack 文件

注意:在生產環境中使用非雜湊式檔案名稱時請小心,因為大多數瀏覽器會快取資產,且在第一次載入時無法偵測到變更。

範例:

filenames: {
  chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js')
}

app

  • 類型function

chunk

  • 類型function

css

  • 類型function

font

  • 類型function

img

  • 類型function

video

  • 類型function

friendlyErrors

設定為 false 以停用 FriendlyErrorsWebpackPlugin 提供的覆蓋層。

  • 類型: boolean
  • 預設值: true

hotMiddleware

請參閱 webpack-hot-middleware 以取得可用的選項。

loaders

自訂 Nuxt 整合式 webpack 加載器的選項。

css

esModule
  • 類型: boolean
  • 預設值: false
importLoaders
  • 類型number
  • 預設值: 0
url
filter
  • 類型function

cssModules

esModule
  • 類型: boolean
  • 預設值: false
importLoaders
  • 類型number
  • 預設值: 0
modules
localIdentName
  • 類型: string
  • 預設值: "[local]_[hash:base64:5]"
url
filter
  • 類型function

esbuild

請參閱esbuild 加載器

jsxFactory
  • 類型: string
  • 預設值: "h"
jsxFragment
  • 類型: string
  • 預設值: "Fragment"
tsconfigRaw
  • 類型: string
  • 預設值: "{}"

file

參閱file-loader 選項

預設值:

{ esModule: false }
esModule
  • 類型: boolean
  • 預設值: false

fontUrl

參閱file-loader 選項

預設值:

{ esModule: false, limit: 1000  }
esModule
  • 類型: boolean
  • 預設值: false
limit
  • 類型number
  • 預設值: 1000

imgUrl

參閱file-loader 選項

預設值:

{ esModule: false, limit: 1000  }
esModule
  • 類型: boolean
  • 預設值: false
limit
  • 類型number
  • 預設值: 1000

less

  • 預設值
{
  "sourceMap": false
}

參閱less-loader 選項

pugPlain

參閱pug 選項

sass

參閱sass-loader 選項

預設值:

{
  sassOptions: {
    indentedSyntax: true
  }
}
sassOptions
indentedSyntax
  • 類型: boolean
  • 預設值: true

scss

  • 預設值
{
  "sourceMap": false
}

參閱sass-loader 選項

stylus

  • 預設值
{
  "sourceMap": false
}

參閱stylus-loader 選項

vue

請參閱 vue-loader 以了解可用的選項。

  • 類型: object
  • 預設值
{
  "transformAssetUrls": {},
  "compilerOptions": {},
  "propsDestructure": {}
}

vueStyle

  • 預設值
{
  "sourceMap": false
}

optimization

設定 webpack 優化

minimize

將 minimize 設定為 false 以停用所有最小化器。(預設在開發模式下為停用)。

  • 類型: boolean
  • 預設值: true

minimizer

您可以將 minimizer 設定為自訂的插件陣列。

runtimeChunk

  • 類型: string
  • 預設值:"single"

splitChunks

automaticNameDelimiter
  • 類型: string
  • 預設值: "/"
cacheGroups
chunks
  • 類型: string
  • 預設值:"all"

optimizeCSS

OptimizeCSSAssets 外掛程式選項。

當啟用 extractCSS 時,預設為 true。

  • 類型: boolean
  • 預設值: false

參閱css-minimizer-webpack-plugin 文件

plugins

新增 webpack 插件。

  • 類型: array

範例:

import webpack from 'webpack'
import { version } from './package.json'
// ...
plugins: [
  new webpack.DefinePlugin({
    'process.VERSION': version
  })
]

postcss

自訂 PostCSS Loader。與 postcss-loader 選項 相同的選項

postcssOptions

config
plugins
  • 類型: object
  • 預設值
{
  "autoprefixer": {},
  "cssnano": {}
}

profile

在 webpackbar 中啟用效能分析器。

通常會透過 CLI 參數 --profile 啟用。

  • 類型: boolean
  • 預設值: false

參閱webpackbar

serverURLPolyfill

要載入以提供 URL 和 URLSearchParams 的 Polyfill 函式庫。

預設為 'url' ( 請參閱套件 )。

  • 類型: string
  • 預設值: "url"

warningIgnoreFilters

用於隱藏建置警告的篩選器。

  • 類型: array

workspaceDir

定義應用程式的工作區目錄。

通常在 monorepo 設定中使用。 Nuxt 會嘗試自動偵測您的工作區目錄,但您可以在此覆寫它。通常不需要設定此選項。

  • 類型: string
  • 預設值: "/<workspaceDir>"