Nuxt 配置

瞭解您可以在 nuxt.config.ts 檔案中使用的所有選項。

alias

您可以透過定義額外的別名來訪問 JavaScript 和 CSS 中的自定義目錄，從而改善您的開發體驗 (DX)。

型別：object
預設

{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "#shared": "/<rootDir>/shared",
  "assets": "/<srcDir>/assets",
  "public": "/<rootDir>/public",
  "#build": "/<rootDir>/.nuxt",
  "#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
}

注意：在 webpack 上下文（影像源、CSS - 但不是 JavaScript）中，您必須透過在別名前加上 ~ 來訪問它。

注意：這些別名將自動新增到生成的 TypeScript 配置 (.nuxt/tsconfig.app.json、.nuxt/tsconfig.server.json 等) 中，以便您獲得完整的型別支援和路徑自動補全。如果您需要進一步擴充套件生成的配置提供的選項，請確保將它們新增到此處或 nuxt.config 中的 typescript.tsConfig 屬性中。

示例:

import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  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)),
  },
})

<template>
  <img src="~images/main-bg.jpg">
</template>

<script>
import data from 'data/test.json'
</script>

<style>
// Uncomment the below
//@import '~style/variables.scss';
//@import '~style/utils.scss';
//@import '~style/base.scss';
body {
  background-image: url('~images/main-bg.jpg');
}
</style>

analyzeDir

當執行 nuxt analyze 時，Nuxt 儲存生成檔案的目錄。

如果指定相對路徑，它將相對於您的 rootDir。

型別: string
預設值： "/<rootDir>/.nuxt/analyze"

app

Nuxt 應用程式配置。

`baseURL`

Nuxt 應用程式的基本路徑。

例如

型別: string
預設值： "/"

示例:

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

這也可以透過設定 NUXT_APP_BASE_URL 環境變數在執行時進行設定。

示例:

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 環境變數在執行時設定為不同的值。

示例:

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

`head`

為每個頁面的 <head> 設定預設配置。

型別：object
預設

{
  "meta": [
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    },
    {
      "charset": "utf-8"
    }
  ],
  "link": [],
  "style": [],
  "script": [],
  "noscript": []
}

示例:

export default defineNuxtConfig({
  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>:root { color: red }</style>
        { textContent: ':root { color: red }' },
      ],
      noscript: [
      // <noscript>JavaScript is required</noscript>
        { textContent: '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"

`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 檔案中啟用 實驗性 檢視過渡支援時才有效。這可以在單個頁面上透過 definePageMeta 覆蓋。

型別：boolean
預設值： false

請參閱: Nuxt View Transition API 文件

appConfig

額外的應用程式配置

為了程式設計使用和型別支援，您可以直接透過此選項提供應用程式配置。它將與 app.config 檔案合併作為預設值。

appId

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

預設為 nuxt-app。

型別: string
預設值： "nuxt-app"

build

共享構建配置。

`analyze`

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

設定為 true 以啟用捆綁分析，或傳遞一個帶有選項的物件 for webpack或 for vite.

型別：object
預設

{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

示例:

export default defineNuxtConfig({
  analyze: {
    analyzerMode: 'static',
  },
})

`templates`

建議使用 @nuxt/kit 中的 addTemplate 而不是此選項。

型別：array

示例:

export default defineNuxtConfig({
  build: {
    templates: [
      {
        src: '~/modules/support/plugin.js', // `src` can be absolute or relative
        dst: 'support.js', // `dst` is relative to project `.nuxt` dir
      },
    ],
  },
})

`transpile`

如果您想使用 Babel 轉譯特定的依賴項，可以在此處新增它們。`transpile` 中的每個項可以是包名、函式、字串或匹配依賴項檔名的正則表示式物件。

您還可以使用函式進行條件轉譯。該函式將接收一個物件 ({ isDev, isServer, isClient, isModern, isLegacy })。

型別：array

示例:

export default defineNuxtConfig({
  build: {
    transpile: [({ isLegacy }) => isLegacy && 'ky'],
  },
})

buildDir

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

許多工具假定 .nuxt 是一個隱藏目錄（因為它以 . 開頭）。如果這是一個問題，您可以使用此選項來阻止它。

型別: string
預設值： "/<rootDir>/.nuxt"

示例:

export default defineNuxtConfig({
  buildDir: 'nuxt-build',
})

buildId

與構建匹配的唯一識別符號。這可能包含專案當前狀態的雜湊值。

型別: string
預設值： "4a2e2d30-418f-41df-8e58-ed5df06de7fd"

builder

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

Nuxt 支援客戶端應用程式的多個構建器。預設情況下，使用 Vite，但您可以切換到 webpack、Rspack，甚至提供自定義構建器實現。

型別：'vite' | 'webpack' | 'rspack' | string | { bundle: (nuxt: Nuxt) => Promise<void> }
預設值： "@nuxt/vite-builder"

使用支援的構建器

export default defineNuxtConfig({
  // default - uses @nuxt/vite-builder
  // builder: 'vite',

  // uses @nuxt/webpack-builder
  // builder: 'webpack',

  // uses @nuxt/rspack-builder
  builder: 'rspack',
})

如果您使用的是 webpack 或 rspack，您需要確保在專案中顯式安裝 @nuxt/webpack-builder 或 @nuxt/rspack-builder。

使用自定義構建器物件

您可以透過傳遞一個帶有 bundle 函式的物件來提供自定義構建器

export default defineNuxtConfig({
  builder: {
    async bundle (nuxt) {
      const entry = await resolvePath(resolve(nuxt.options.appDir, 'entry'))

      // Build client and server bundles
      await buildClient(nuxt, entry)
      if (nuxt.options.ssr) {
        await buildServer(nuxt, entry)
      }

      // ... it's a bit more complicated than that, of course!
    },
  },
})

建立自定義構建器包

要將自定義構建器建立為單獨的包，它應該匯出一個 bundle 函式。然後，您可以在 nuxt.config.ts 中指定包名。

export default defineNuxtConfig({
  builder: 'my-custom-builder',
})

compatibilityDate

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

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

css

您可以定義要全域性設定（包含在每個頁面中）的 CSS 檔案/模組/庫。

Nuxt 將根據副檔名自動猜測檔案型別並使用適當的預處理器。如果您需要使用它們，您仍然需要安裝所需的載入器。

型別：array

示例:

export default defineNuxtConfig({
  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',
  ],
})

除錯

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

目前，它在伺服器上打印出鉤子名稱和時間，並在瀏覽器中也記錄鉤子引數。您也可以將其設定為一個物件以啟用特定的除錯選項。

型別：boolean
預設值： false

開發

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

通常，您不需要設定此項。

型別：boolean
預設值： false

devServer

`cors`

為開發伺服器設定 CORS 選項

`origin`

型別：array
預設

[
  {}
]

`https`

是否啟用 HTTPS。

型別：boolean
預設值： false

示例:

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

`url`

監聽開發伺服器 URL。

不應直接設定此項，因為它總是會被開發伺服器使用完整 URL 覆蓋（用於模組和內部使用）。

型別: string
預設值： "https://:3000"

devServerHandlers

僅用於 Nitro 開發的伺服器處理程式。

型別：array

請參閱: Nitro 伺服器路由文件

devtools

啟用 Nuxt DevTools 進行開發。

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

請參閱: Nuxt DevTools獲取更多資訊。

dir

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

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

`assets`

assets 目錄（在您的構建中別名為 ~assets）。

型別: string
預設值： "app/assets"

`layouts`

佈局目錄，其中每個檔案都將自動註冊為 Nuxt 佈局。

型別: string
預設值： "app/layouts"

`middleware`

中介軟體目錄，其中每個檔案都將自動註冊為 Nuxt 中介軟體。

型別: string
預設值： "app/middleware"

`modules`

模組目錄，其中每個檔案都將自動註冊為 Nuxt 模組。

型別: string
預設值： "modules"

`pages`

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

型別: string
預設值： "app/pages"

`plugins`

外掛目錄，其中每個檔案都將自動註冊為 Nuxt 外掛。

型別: string
預設值： "app/plugins"

`public`

包含您的靜態檔案的目錄，這些檔案將透過 Nuxt 伺服器直接訪問，並在應用程式生成時複製到您的 dist 資料夾中。

型別: string
預設值： "public"

`shared`

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

型別: string
預設值： "shared"

esbuild

`options`

配置 Nuxt 內部使用的共享 esbuild 選項，並傳遞給其他構建器，例如 Vite 或 webpack。

experimental

::read-more{to="/docs/4.x/guide/going-further/experimental-features"} 瞭解更多關於 Nuxt 的實驗性功能。:

extends

從多個本地或遠端源擴充套件專案。

值應為字串或字串陣列，指向源目錄或相對於當前配置的配置路徑。您可以使用 github:、gh:、gitlab: 或 bitbucket:。

請參閱: c12 關於擴充套件配置層的文件

請參閱: giget 文件

extensions

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

型別：array
預設

[
  ".js",
  ".jsx",
  ".mjs",
  ".ts",
  ".tsx",
  ".vue"
]

features

::read-more{to="/docs/4.x/guide/going-further/features#features"} 瞭解更多關於 Nuxt 的可選功能。:

future

::read-more{to="/docs/4.x/guide/going-further/features#features"} 瞭解如何選擇在新版本（可能是主要版本）框架中成為預設值的新功能。:

hooks

Hooks 是 Nuxt 事件的監聽器，通常用於模組，但在 nuxt.config 中也可用。

在內部，鉤子遵循使用冒號的命名模式（例如，build:done）。為了便於配置，您也可以在 nuxt.config 中將它們結構化為分層物件（如下所示）。

示例:

import fs from 'node:fs'
import path from 'node:path'

export default defineNuxtConfig({
  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}",
  "**/*.sock",
  ".nuxt/analyze",
  ".nuxt",
  "**/-*.*"
]

ignoreOptions

直接將選項傳遞給 node-ignore（Nuxt 用於忽略檔案）。

請參閱: node-ignore

示例:

export default defineNuxtConfig({
  ignoreOptions: {
    ignorecase: false,
  },
})

ignorePrefix

app/pages/、app/layouts/、app/middleware/ 和 public/ 目錄中的任何檔案，如果其檔名以 ignorePrefix 指定的字首開頭，將在構建過程中被忽略。這旨在防止某些檔案在構建的應用程式中被處理或提供。預設情況下，ignorePrefix 設定為 '-'，忽略任何以 '-' 開頭的檔案。

型別: string
預設值： "-"

imports (匯入)

配置 Nuxt 如何將可組合項自動匯入到您的應用程式中。

請參閱: Nuxt 文件

`dirs`

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

型別：array

示例:

export default defineNuxtConfig({
  imports: {
  // Auto-import pinia stores defined in `~/stores`
    dirs: ['stores'],
  },
})

`scan`

是否掃描您的 app/composables/ 和 app/utils/ 目錄以自動匯入可組合項。Nuxt 或其他模組註冊的自動匯入，例如來自 vue 或 nuxt 的匯入，將仍然啟用。

型別：boolean
預設值： true

logLevel

構建日誌時的日誌級別。

在 CI 中執行或 TTY 不可用時，預設為 'silent'。此選項在 Vite 中用作 'silent'，在 webpack 中用作 'none'。

型別: string
預設值： "info"

modules

模組是 Nuxt 擴充套件，可以擴充套件其核心功能並新增無限的整合。

每個模組都是一個字串（可以是包名，也可以是檔案路徑），一個包含模組作為第一個字串和選項作為第二個物件的元組，或者一個內聯模組函式。Nuxt 嘗試使用 node require 路徑（在 node_modules 中）解析模組陣列中的每個項，然後如果使用 ~ 別名，將從專案 srcDir 解析。

型別：array

注意：模組按順序執行，因此順序很重要。首先，載入 nuxt.config.ts 中定義的模組。然後，執行 modules/ 目錄中的模組，它們按字母順序載入。

示例:

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

modulesDir

用於設定模組目錄以進行路徑解析（例如，webpack 的 resolveLoading、nodeExternals 和 postcss）。

配置路徑是相對於 options.rootDir（預設是當前工作目錄）。如果您的專案組織為 yarn workspace 風格的單一儲存庫，則可能需要設定此欄位。

型別：array
預設

[
  "/<rootDir>/node_modules"
]

示例:

export default defineNuxtConfig({
  modulesDir: ['../../node_modules'],
})

nitro

Nitro 配置。

請參閱: Nitro 配置文件

`runtimeConfig`

型別：object
預設

{
  "public": {},
  "app": {
    "buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
    "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，就會注入一個額外的魔術字串，可用於在伺服器和客戶端之間去重請求。您需要採取措施來處理此附加鍵。該鍵將根據函式在檔案中被呼叫的位置而唯一。

型別：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`

從伺服器或客戶端構建中進行可組合項的樹搖。

示例:

export default defineNuxtConfig({
  optimization: {
    treeShake: {
      composables: {
        client: { vue: ['onMounted'] },
        server: { vue: ['onServerPrefetch'] },
      },
    },
  },
})

`client`

型別：object
預設

{
  "vue": [
    "onRenderTracked",
    "onRenderTriggered",
    "onServerPrefetch"
  ],
  "#app": [
    "definePayloadReducer",
    "definePageMeta",
    "onPrehydrate"
  ]
}

`伺服器`

型別：object
預設

{
  "vue": [
    "onMounted",
    "onUpdated",
    "onUnmounted",
    "onBeforeMount",
    "onBeforeUpdate",
    "onBeforeUnmount",
    "onRenderTracked",
    "onRenderTriggered",
    "onActivated",
    "onDeactivated"
  ],
  "#app": [
    "definePayloadReviver",
    "definePageMeta"
  ]
}

pages

是否在 Nuxt 3 中使用 vue-router 整合。如果您不提供值，則如果您在原始檔夾中有一個 app/pages/ 目錄，它將被啟用。

此外，您可以提供一個 glob 模式或模式陣列，以僅掃描某些檔案中的頁面。

示例:

export default defineNuxtConfig({
  pages: {
    pattern: ['**/*/*.vue', '!**/*.spec.*'],
  },
})

plugins

Nuxt 應用程式外掛陣列。

每個外掛可以是一個字串（可以是檔案的絕對路徑或相對路徑）。如果它以 .client 或 .server 結尾，那麼它將僅在適當的上下文中自動載入。它也可以是一個帶有 src 和 mode 鍵的物件。

型別：array

注意：外掛也會從 ~/plugins 目錄自動註冊，這些外掛無需在 nuxt.config 中列出，除非您需要自定義它們的順序。所有外掛都透過其 src 路徑進行去重。

請參閱: app/plugins/ 目錄文件

示例:

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

postcss

`plugins`

配置 PostCSS 外掛的選項。

請參閱: PostCSS 文件

`autoprefixer`

解析 CSS 併為 CSS 規則新增供應商字首的外掛。

請參閱: autoprefixer

rootDir

定義應用程式的根目錄。

此屬性可以被覆蓋（例如，執行 nuxt ./my-app/ 將把 rootDir 設定為當前/工作目錄中 ./my-app/ 的絕對路徑。通常不需要配置此選項。

型別: string
預設值： "/<rootDir>"

routeRules

應用於匹配伺服器路由的全域性路由選項。

實驗性：這是一個實驗性功能，API 將來可能會改變。

請參閱: Nitro 路由規則文件

router

`options`

傳遞給 vue-router 的額外路由選項。除了 vue-router 的選項外，Nuxt 還提供額外的選項來自定義路由器（見下文）。

注意：只有 JSON 可序列化的選項應透過 Nuxt 配置傳遞。為了更精細的控制，您可以使用 router.options.ts 檔案。

請參閱: Vue Router 文件.

`hashMode`

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

型別：boolean
預設值： false

預設值: false

`scrollBehaviorType`

自定義雜湊連結的滾動行為。

型別: string
預設值： "auto"

預設值: 'auto'

此物件的值只能透過 useRuntimeConfig 從伺服器訪問。它主要應包含私有配置，這些配置不會暴露在前端。這可能包括對您的 API 秘密令牌的引用。在 public 和 app 下的任何內容也將暴露給前端。值將根據執行時匹配的環境變數自動替換，例如，設定環境變數 NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ 將覆蓋下面示例中的兩個值。

型別：object
預設

{
  "public": {},
  "app": {
    "buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

示例:

export default defineNuxtConfig({
  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.
    },
  },
})

伺服器

Nuxt 伺服器構建器的配置。

`builder`

指定用於捆綁應用程式伺服器部分的伺服器構建器。

預設情況下，Nuxt 使用 @nuxt/nitro-server，它提供獨立的 Nitro 整合。此架構允許不同的 Nitro 整合模式，例如使用 Nitro 作為 Vite 外掛（帶有 Vite Environment API）。

型別：string | { bundle: (nuxt: Nuxt) => Promise<void> }
預設值： "@nuxt/nitro-server"

此選項旨在供內部使用，API 尚未最終確定。在依賴當前實現之前，請先提交 issue。

serverDir

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

如果指定相對路徑，它將相對於您的 rootDir。

型別: string
預設值： "/<srcDir>/server"

serverHandlers

Nitro 伺服器處理程式。

每個處理程式都接受以下選項

處理程式：定義處理程式的檔案的路徑。 - 路由：處理程式可用的路由。這遵循以下約定rou3。 - 方法：應處理的請求的 HTTP 方法。 - 中介軟體：指定是否為中介軟體處理程式。 - 惰性：指定是否使用惰性載入匯入處理程式。
型別：array

請參閱: server/ 目錄文件

注意：來自 server/api、server/middleware 和 server/routes 的檔案將由 Nuxt 自動註冊。

示例:

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

sourcemap

配置是否以及如何為伺服器和/或客戶端捆綁包生成源對映。

如果設定為單個布林值，則該值適用於伺服器和客戶端。此外，'hidden' 選項也適用於伺服器和客戶端。客戶端和伺服器的可用選項： - true：生成源對映並在最終捆綁包中包含源引用。 - false：不生成任何源對映。 - 'hidden'：生成源對映但不包含最終捆綁包中的引用。

型別：object
預設

{
  "server": true,
  "client": false
}

spaLoadingTemplate

布林值或 HTML 檔案的路徑，其內容將插入到任何使用 ssr: false 渲染的 HTML 頁面中。

如果未設定，它將使用您的某個層中的 ~/spa-loading-template.html 檔案（如果存在）。 - 如果為 false，則不會載入 SPA 載入指示器。 - 如果為 true，Nuxt 將在您的某個層中查詢 ~/spa-loading-template.html 檔案，否則將使用預設的 Nuxt 影像。一些好的旋轉器來源是 SpinKit或 SVG Spinners.
預設值： null

示例：~/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
預設值： "app" (Nuxt 4), "." (Nuxt 3 with compatibilityMode: 3)

示例:

export default defineNuxtConfig({
  srcDir: 'app/',
})

這需要以下資料夾結構

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

ssr

是否啟用 HTML 渲染——無論是動態的（在伺服器模式下）還是在生成時。如果設定為 false，生成的頁面將沒有內容。

型別：boolean
預設值： true

telemetry

手動停用 nuxt 遙測。

請參閱: Nuxt Telemetry獲取更多資訊。

test

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

型別：boolean
預設值： false

theme

從本地或遠端源擴充套件專案。

值應為字串，指向源目錄或相對於當前配置的配置路徑。您可以使用 github:、gitlab:、bitbucket: 或 https:// 從遠端 git 倉庫擴充套件。

型別: string

typescript

Nuxt 的 TypeScript 整合配置。

`builder`

要包含在您的專案中的構建器型別。

預設情況下，Nuxt 根據您的 builder 選項（預設為 'vite'）推斷此選項，但您可以關閉構建器環境型別（使用 false）以完全自行處理，或者選擇 'shared' 選項。建議模組作者使用 'shared' 選項，他們將希望支援多種可能的構建器。

預設值： null

`hoist`

要在 compilerOptions.paths 中生成深層別名的模組。目前尚不支援子路徑。在使用 pnpm monorepo 且 shamefully-hoist=false 時，可能需要此項。

型別：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 shim。

我們建議改為讓官方 Vue 擴充套件為您的元件生成準確的型別。請注意，如果您正在使用其他庫（例如 ESLint），並且它們無法理解 .vue 檔案的型別，您可能希望將其設定為 true。

型別：boolean
預設值： false

`strict`

TypeScript 附帶某些檢查，可為您的程式提供更高的安全性和分析能力。將程式碼庫轉換為 TypeScript 後，您可以開始啟用這些檢查以提高安全性。閱讀更多

型別：boolean
預設值： true

`tsConfig`

您可以使用此選項擴充套件生成的 TypeScript 配置 (.nuxt/tsconfig.app.json、.nuxt/tsconfig.server.json 等)。

`typeCheck`

啟用構建時型別檢查。

如果設定為 true，這將在開發中進行型別檢查。您可以透過將其設定為 build 將其限制為構建時型別檢查。需要安裝 typescript 和 vue-tsc 作為開發依賴。

型別：boolean
預設值： false

請參閱: Nuxt TypeScript 文件

unhead

一個物件，允許我們配置 unhead nuxt 模組。

`legacy`

為 unhead 模組啟用舊版相容模式。這將應用以下更改： - 停用 Capo.js 排序 - 新增 DeprecationsPlugin：支援 hid、vmid、children、body - 新增 PromisesPlugin：支援 promise 作為輸入

型別：boolean
預設值： false

請參閱: unhead 遷移文件

示例:

export default defineNuxtConfig({
  unhead: {
    legacy: true,
  },
})

`renderSSRHeadOptions`

將傳遞給 renderSSRHead 以自定義輸出的物件。

型別：object
預設

{
  "omitLineBreaks": false
}

示例:

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`

型別：object
預設

{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

`模式`

型別: string
預設值： "production"

`optimizeDeps`

`esbuildOptions`

型別：object
預設

{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

`exclude`

型別：array
預設

[
  "vue-demi"
]

`publicDir`

`resolve`

`extensions`

型別：array
預設

[
  ".mjs",
  ".js",
  ".ts",
  ".jsx",
  ".tsx",
  ".json",
  ".vue"
]

`root`

型別: string
預設值： "/<srcDir>"

`伺服器`

`fs`

`allow`

型別：array
預設

[
  "/<rootDir>/.nuxt",
  "/<srcDir>",
  "/<rootDir>",
  "/<workspaceDir>"
]

`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
預設

{
  "isCustomElement": {
    "$schema": {
      "title": "",
      "description": "",
      "tags": []
    }
  }
}

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

`ignorePermissionErrors`

型別：boolean
預設值： true

`rewatchOnRawEvents`

一個事件型別陣列，當接收到這些事件時，將導致監視器重新啟動。

`webpack`

直接傳遞給 webpack 的 watchOptions。

請參閱: webpack@4 watch options.

`aggregateTimeout`

型別：number
預設值： 1000

webpack

`aggressiveCodeRemoval`

硬替換 typeof process、typeof window 和 typeof document 以進行捆綁包的 tree-shake。

型別：boolean
預設值： false

`analyze`

如果您正在使用 webpack，Nuxt 使用 webpack-bundle-analyzer 來視覺化您的捆綁包以及如何最佳化它們。

設定為 true 以啟用捆綁分析，或傳遞一個帶有選項的物件 for webpack或 for vite.

型別：object
預設

{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

示例:

export default defineNuxtConfig({
  webpack: {
    analyze: {
      analyzerMode: 'static',
    },
  },
})

`cssSourceMap`

啟用 CSS 源對映支援（開發中預設為 true）。

型別：boolean
預設值： false

`devMiddleware`

請參閱 webpack-dev-middleware檢視可用選項。

`stats`

型別: string
預設值： "none"

`experiments`

配置 webpack experiments

`extractCSS`

啟用通用 CSS 提取。

使用 mini-css-extract-plugin在底層，您的 CSS 將被提取到單獨的檔案中，通常每個元件一個。這允許單獨快取您的 CSS 和 JavaScript。

型別：boolean
預設值： true

示例:

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

如果您想將所有 CSS 提取到一個檔案中，有一個解決方法。但是，請注意不建議將所有內容提取到一個檔案中。提取到多個 CSS 檔案有利於快取和預載入隔離。它還可以透過僅下載和解析所需的資源來提高頁面效能。

示例:

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

`filenames`

自定義捆綁包檔名。

要更多地瞭解清單的使用，請檢視 webpack 文件.

注意：在生產環境中使用非雜湊檔名時要小心，因為大多數瀏覽器會快取資產，並且在首次載入時不會檢測到更改。

此示例將花式塊名稱更改為數字 ID

示例:

export default defineNuxtConfig({
  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 提供的覆蓋。FriendlyErrorsWebpackPlugin.

型別：boolean
預設值： true

`esModule`

型別：boolean
預設值： false

`importLoaders`

型別：number
預設值： 0

`url`

`filter`

型別：function

`cssModules`

請參閱css-loader檢視可用選項。

`esModule`

型別：boolean
預設值： false

`importLoaders`

型別：number
預設值： 0

`modules`

`localIdentName`

型別: string
預設值： "[local]_[hash:base64:5]"

`url`

`filter`

型別：function

`esbuild`

型別：object
預設

{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

請參閱: esbuild loader

`file`

請參閱: file-loader 選項

預設:

{ "esModule": false }

`esModule`

型別：boolean
預設值： false

`limit`

型別：number
預設值： 1000

`fontUrl`

請參閱: file-loader 選項

預設:

{ "esModule": false }

`esModule`

型別：boolean
預設值： false

`limit`

型別：number
預設值： 1000

`imgUrl`

請參閱: file-loader 選項

預設:

{ "esModule": false }

`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檢視可用選項。

`compilerOptions`

型別：object

`propsDestructure`

型別：boolean
預設值： true

`transformAssetUrls`

型別：object
預設

{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

`vueStyle`

預設

{
  "sourceMap": false
}

`optimization`

配置webpack optimization.

`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'

export default defineNuxtConfig({
  webpack: {
    plugins: [
      // ...
      new webpack.DefinePlugin({
        'process.VERSION': version,
      }),
    ],
  },
})

`postcss`

自定義 PostCSS 載入器。與postcss-loader 選項相同

`postcssOptions`

`plugins`

型別：object
預設

{
  "autoprefixer": {},
  "cssnano": {}
}

`profile`

在 webpackbar 中啟用分析器。

通常透過 CLI 引數 --profile 啟用。

型別：boolean
預設值： false

請參閱: webpackbar.

`serverURLPolyfill`

用於提供 URL 和 URLSearchParams 的 polyfill 庫。

預設為 'url'（參見包).

型別: string
預設值： "url"

`warningIgnoreFilters`

用於隱藏構建警告的過濾器。

型別：array

workspaceDir

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

通常在單體倉庫設定中使用。Nuxt 將嘗試自動檢測您的工作區目錄，但您可以在此處覆蓋它。通常不需要配置此選項。

型別: string
預設值： "/<workspaceDir>"

這有幫助嗎？

報告問題或在 GitHub 上編輯此頁面

Import meta

使用 `import.meta` 瞭解您的程式碼正在哪裡執行。

Hello World

一個最小的 Nuxt 應用程式只需要 `app.vue` 和 `nuxt.config.js` 檔案。