Question

配置文件

configure

Nuxt 配置参考

发现您可以在 nuxt.config.ts 文件中使用的所有选项。

alias

• Type: object
• Default

json

{
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "~": "/<rootDir>",
  "@": "/<rootDir>",
  "assets": "/<rootDir>/assets",
  "public": "/<rootDir>/public"
}

您可以通过定义额外的别名来访问您的 JavaScript 和 CSS 中的自定义目录来改进您的 DX。

Example:

js

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))
  }
}

app

Nuxt 应用程序配置。

baseURL

额外的应用程序配置

对于编程使用和类型支持，您可以直接提供带有此选项的应用程序配置。 它将作为默认值与 app.config 文件合并。

build

共享构建配置。

analyze

• Type: string
• Default: "/<rootDir>/.nuxt"

定义放置构建的 Nuxt 文件的目录。

许多工具假定 .nuxt 是一个隐藏目录（因为它以 . 开头）。 如果这是一个问题，您可以使用此选项来防止它。

Example:

js

export default {  
  buildDir: 'nuxt-build'
}

builder

• Type: string
• Default: "@nuxt/vite-builder"

用于捆绑应用程序的 Vue 部分的构建器。

components

• Type: object
• Default

json

{
  "dirs": [
    {
      "path": "~/components/global",
      "global": true
    },
    "~/components"
  ]
}

配置 Nuxt 组件自动注册。

此处配置的目录中的任何组件都可以在整个页面、布局（和其他组件）中使用，而无需显式导入它们。

See: https://www.wenjiangs.com/doc/nuxtjs-dirs-components

css

• Type: array

您可以定义要全局设置的 CSS 文件/模块/库（包含在每个页面中）。

Nuxt 会自动根据扩展名猜测文件类型，并使用适当的预处理器。 如果需要使用它们，您仍然需要安装所需的加载程序。

Example:

js

css: [
  // 直接加载一个 Node.js 模块（这里是一个 Sass 文件）。
  'bulma',
  // 项目中的CSS文件
  '@/assets/css/main.css',
  // 项目中的 SCSS 文件
  '@/assets/css/main.scss'
]

debug

• Type: boolean
• Default: false

设置为“true”以启用调试模式。

目前，它在服务器上打印出挂钩名称和时间，并在浏览器中记录挂钩参数。

dev

• Type: boolean
• Default: false

Nuxt 是否在开发模式下运行。

通常，您不需要设置此项。

devServer

host

• Type: array

Nitro 仅开发服务器处理程序。

See: https://www.wenjiangs.com/doc/nuxtjs-getting-started-routing

dir

自定义 Nuxt 使用的默认目录结构。

除非需要，否则最好坚持使用默认值。

assets

asyncEntry

• Default: null

从多个本地或远程源扩展项目。

值应该是指向源目录或相对于当前配置的配置路径的字符串或字符串数组。 您可以使用 github:、gitlab:、bitbucket: 或 https:// 从远程 git 存储库进行扩展。

extensions

• Type: array
• Default

js

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

应该由 Nuxt 解析器解析的扩展。

generate

exclude

• Default: null

钩子是 Nuxt 事件的侦听器，通常在模块中使用，但也可在 nuxt.config 中使用。

在内部，挂钩遵循使用冒号的命名模式（例如，build:done）。 为了便于配置，您还可以在 nuxt.config 中将它们构造为分层对象（如下所示）。

Example:

js

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

• Type: array
• Default

js

[  
  "**/*.stories.{js,ts,jsx,tsx}",
  "**/*.{spec,test}.{js,ts,jsx,tsx}",
  "**/*.d.ts",  
  ".output",  
  "**/-*.*"
]

比 ignorePrefix 更具可定制性：所有与 ignore 数组中指定的 glob 模式匹配的文件都将在构建中被忽略。

ignoreOptions

将选项直接传递给 node-ignore（Nuxt 使用它来忽略文件）。

See: node-ignoreExample:

js

ignoreOptions: {  ignorecase: false}

ignorePrefix

• Type: string
• Default: "-"

如果文件名以 ignorePrefix 指定的前缀开头，则 pages/、layouts/、middleware/ 或 store/ 中的任何文件都将在构建期间被忽略。

imports

配置 Nuxt 如何将可组合项自动导入您的应用程序。

See: Nuxt 3 documentation

dirs

• Type: array

模块是 Nuxt 扩展，可以扩展其核心功能并添加无穷无尽的集成。

每个模块要么是一个字符串（可以引用一个包，也可以是一个文件的路径），一个以模块作为第一个字符串，选项作为第二个对象的元组，或者一个内联模块函数。 Nuxt 尝试使用节点要求路径（在 node_modules 中）解析模块数组中的每个项目，然后如果使用 ~ 别名，将从项目 srcDir 中解析。

Example:

js

modules: [
  // 使用包名
  '@nuxtjs/axios',
  // 相对于你的项目 srcDir
  '~/modules/awesome.js',
  // 提供选项
  ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  // 内联定义
  function () {}
]

modulesDir

• Type: array
• Default

js

[
  "/<rootDir>/node_modules",
  "/Users/daniel/code/nuxt.js/packages/schema/node_modules"
]

用于设置路径解析的模块目录（例如，webpack 的 resolveLoading、nodeExternals 和 postcss）。

配置路径是相对于 options.rootDir 的（默认是当前工作目录）。 如果您的项目被组织为纱线工作区样式的单一存储库，则可能需要设置此字段。

Example:

js

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

nitro

硝基的配置。

See: https://www.wenjiangs.com/doc/nitro-guide-configuration

routeRules

• Type: boolean

是否在 Nuxt 3 中使用 vue-router 集成。如果你没有提供一个值，如果你的源文件夹中有一个 pages/ 目录，它将被启用。

plugins

• Type: array

一系列 nuxt 应用程序插件。

每个插件都可以是一个字符串（可以是文件的绝对路径或相对路径）。 如果它以 .client 或 .server 结尾，那么它将仅在适当的上下文中自动加载。 它也可以是一个带有 src 和 mode 键的对象。

See: https://www.wenjiangs.com/doc/nuxtjs-dirs-pluginsExample:

js

plugins: [
  '~/plugins/foo.client.js', // 仅在客户端
  '~/plugins/bar.server.js', // 仅在服务器端
  '~/plugins/baz.js', // 客户端和服务器
  { src: '~/plugins/both-sides.js' },
  { src: '~/plugins/client-only.js', mode: 'client' }, // 仅在客户端
  { src: '~/plugins/server-only.js', mode: 'server' } // 仅在服务器端
]

postcss

plugins

• Type: string
• Default: "/<rootDir>"

定义应用程序的根目录。

此属性可以被覆盖（例如，运行 nuxt ./my-app/ 会将 rootDir 设置为当前/工作目录中 ./my-app/ 的绝对路径。通常不需要 配置此选项。

routeRules

应用于匹配服务器路由的全局路由选项。

实验性：这是一项实验性功能，API 将来可能会发生变化。 参见：https://www.wenjiangs.com/doc/nitro-guide-configuration/#routes

router

options

• Type: object
• Default

json

{
  "public": {},
  "app": {
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

运行时配置允许将动态配置和环境变量传递给 Nuxt 应用上下文。

该对象的值只能使用 useRuntimeConfig 从服务器访问。 它主要应该持有不暴露在前端的_private_配置。 这可能包括对您的 API 秘密令牌的引用。 public 和 app 下的任何内容也会暴露给前端。 值在运行时自动替换为匹配的环境变量，例如 设置环境变量 NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ 将覆盖下面示例中的两个值。

Example:

js

export default {
 runtimeConfig: {
    apiKey: '' // 默认为空字符串，在运行时使用 process.env.NUXT_API_KEY 自动设置
    public: {
       baseURL: '' // 也暴露在前端。
    }
  }
}

serverDir

• Type: string
• Default: "/<rootDir>/server"

定义 Nuxt 应用程序的服务器目录，其中保存了 Nitro 路由、中间件和插件。

If a relative path is specified, it will be relative to your rootDir.

serverHandlers

• Type: array

硝基服务器处理程序。

每个处理程序接受以下选项： - 处理程序：定义处理程序的文件的路径。 - 路线：处理程序可用的路线。 这遵循 https://github.com/unjs/radix3 的约定。 - 方法：应处理的请求的 HTTP 方法。 - 中间件：指定它是否是中间件处理程序。 - lazy：指定是否使用延迟加载来导入处理程序。

See: https://nuxt.com/docs/guide/directory-structure/server

Example:

js

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

sourcemap

• Type: object
• Default

json

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

是否生成 sourcemaps。

srcDir

• Type: string
• Default: "/<rootDir>"

定义 Nuxt 应用程序的源目录。

如果指定了相对路径，它将相对于 rootDir。

Example:

js

export default {  srcDir: 'src/' }

这适用于以下文件夹结构：

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

ssr

• Type: boolean
• Default: true

是否启用 HTML 呈现 - 动态（在服务器模式下）或在生成时。 如果设置为“false”并与“static”目标结合使用，生成的页面将只显示一个没有内容的加载屏幕。

telemetry

• Type: boolean

手动禁用 nuxt 遥测。

See: Nuxt Telemetry for more information.

test

• Type: boolean
• Default: false

您的应用程序是否正在接受单元测试。

theme

• Type: string
• Default: null

从本地或远程源扩展项目。

值应该是指向源目录或相对于当前配置的配置路径的字符串。 您可以使用 github:、gitlab:、bitbucket: 或 https:// 从远程 git 存储库进行扩展。

typescript

Nuxt 的 TypeScript 集成配置。

includeWorkspace

将直接传递给 Vite 的配置。

有关详细信息，请参阅 https://vitejs.dev/config。 请注意，并非所有 vite 选项都在 Nuxt 中受支持。

build

Vue.js config

compilerOptions

watchers 属性让您可以覆盖 nuxt.config 中的观察者配置。

chokidar

aggressiveCodeRemoval

• Type: string
• Default: "/<rootDir>"

确定应用程序的工作区目录。

这通常在 monorepo 设置中使用。 Nuxt 将尝试自动检测您的工作区目录，但您可以在此处覆盖它。 通常不需要配置此选项。