---
title: "Layers"
description: "Nuxt Kit 提供了帮助您处理层及其目录结构的实用工具。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/api/kit/layers"
---
# Layers

> Nuxt Kit 提供了帮助您处理层及其目录结构的实用工具。

Nuxt 层提供了一种强大的方式，用于在项目之间共享和扩展功能。在模块中使用层时，您常常需要访问每个层的目录路径。Nuxt Kit 提供了 `getLayerDirectories` 工具，用于访问 Nuxt 应用中所有层的解析目录路径。

## `getLayerDirectories`

获取 Nuxt 应用所有层的解析目录路径。此函数提供了一种结构化的方式来访问层目录，而无需直接访问私有的 `nuxt.options._layers` 属性。

### 用法

```ts twoslash
import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const layerDirs = getLayerDirectories()

    // 访问所有层的目录
    for (const [index, layer] of layerDirs.entries()) {
      console.log(`层 ${index}:`)
      console.log(`  根目录: ${layer.root}`)
      console.log(`  应用目录: ${layer.app}`)
      console.log(`  服务器目录: ${layer.server}`)
      console.log(`  页面目录: ${layer.appPages}`)
      // ... 其他目录
    }
  },
})
```

### 类型

```ts twoslash
// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function getLayerDirectories (nuxt?: Nuxt): LayerDirectories[]

interface LayerDirectories {
  /** Nuxt 根目录（默认为 `/`） */
  readonly root: string
  /** Nitro 源代码目录（默认为 `/server`） */
  readonly server: string
  /** 本地模块目录（默认为 `/modules`） */
  readonly modules: string
  /** 共享目录（默认为 `/shared`） */
  readonly shared: string
  /** 公共目录（默认为 `/public`） */
  readonly public: string
  /** Nuxt 源码目录（默认为 `/app/`） */
  readonly app: string
  /** 布局目录（默认为 `/app/layouts`） */
  readonly appLayouts: string
  /** 中间件目录（默认为 `/app/middleware`） */
  readonly appMiddleware: string
  /** 页面目录（默认为 `/app/pages`） */
  readonly appPages: string
  /** 插件目录（默认为 `/app/plugins`） */
  readonly appPlugins: string
}
```

### 参数

**`nuxt`**（可选）：用于获取层的 Nuxt 实例。如果未提供，函数将使用当前的 Nuxt 上下文。

### 返回值

`getLayerDirectories` 函数返回一个 `LayerDirectories` 对象数组，每个对象对应于应用中的一个层。

**层优先级顺序**：层按优先级排序，其中：

- **第一层** 是用户/项目层（优先级最高）
- **前面的层会覆盖后面的层**
- **基础层排在数组末尾**（优先级最低）

此顺序与 Nuxt 的层解析系统一致，用户定义的配置和文件优先于基础层提供的内容。

**`LayerDirectories`**：包含该层解析后目录路径的对象。

| 属性              | 类型       | 描述                   |
| --------------- | -------- | -------------------- |
| `root`          | `string` | 层的根目录（相当于 `rootDir`） |
| `server`        | `string` | Nitro 服务器端代码目录       |
| `modules`       | `string` | 本地模块目录               |
| `shared`        | `string` | 客户端和服务器共享代码目录        |
| `app`           | `string` | 层的源码目录（相当于 `srcDir`） |
| `public`        | `string` | 用于静态资源的公共目录          |
| `appLayouts`    | `string` | Vue 布局组件目录           |
| `appMiddleware` | `string` | 路由中间件目录              |
| `appPages`      | `string` | 文件路由的页面目录            |
| `appPlugins`    | `string` | Nuxt 插件目录            |

### 示例

**处理所有层的文件：**

```ts twoslash
// @errors: 2307
// ---cut---
import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
import { resolve } from 'pathe'
import { globby } from 'globby'

export default defineNuxtModule({
  async setup () {
    const layerDirs = getLayerDirectories()

    // 找到所有层中的组件文件
    // 注意：layerDirs[0] 是用户层（最高优先级）
    // 数组中后面的层优先级较低
    const componentFiles = []
    for (const [index, layer] of layerDirs.entries()) {
      const files = await globby('**/*.vue', {
        cwd: resolve(layer.app, 'components'),
        absolute: true,
      })
      console.log(`层 ${index} (${index === 0 ? '用户层' : '基础层'}):`, files.length, '个组件')
      componentFiles.push(...files)
    }
  },
})
```

**从多个层添加模板：**

```ts twoslash
import { addTemplate, defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
import { basename, resolve } from 'pathe'
import { existsSync } from 'node:fs'

export default defineNuxtModule({
  setup () {
    const layerDirs = getLayerDirectories()

    // 添加每个层中如果存在的配置文件
    for (const dirs of layerDirs) {
      const configPath = resolve(dirs.app, 'my-module.config.ts')
      if (existsSync(configPath)) {
        addTemplate({
          filename: `my-module-${basename(dirs.root)}.config.ts`,
          src: configPath,
        })
      }
    }
  },
})
```

**遵循层优先级：**

```ts twoslash
import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
import { resolve } from 'pathe'
import { existsSync, readFileSync } from 'node:fs'

export default defineNuxtModule({
  setup () {
    const layerDirs = getLayerDirectories()

    // 找到第一个（最高优先级）包含特定配置文件的层
    // 这符合层优先级系统
    let configContent = null
    for (const dirs of layerDirs) {
      const configPath = resolve(dirs.app, 'my-config.json')
      if (existsSync(configPath)) {
        configContent = readFileSync(configPath, 'utf-8')
        console.log(`使用来自层的配置: ${dirs.root}`)
        break // 使用第一个（最高优先级）找到的配置
      }
    }

    // 另一种方式：收集所有层的配置，用户层优先
    const allConfigs = {}
    for (const dirs of layerDirs.reverse()) { // 从优先级最低到最高处理
      const configPath = resolve(dirs.app, 'my-config.json')
      if (existsSync(configPath)) {
        const config = JSON.parse(readFileSync(configPath, 'utf-8'))
        Object.assign(allConfigs, config) // 后面的赋值覆盖前面的
      }
    }
  },
})
```

**检查特定层的指定目录：**

```ts twoslash
import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
import { existsSync } from 'node:fs'
import { resolve } from 'pathe'

export default defineNuxtModule({
  setup () {
    const layerDirs = getLayerDirectories()

    // 查找包含特定自定义目录的层
    const layersWithAssets = layerDirs.filter((layer) => {
      return existsSync(resolve(layer.app, 'assets'))
    })

    console.log(`找到 ${layersWithAssets.length} 个包含 assets 目录的层`)
  },
})
```

::note
`getLayerDirectories` 函数通过 WeakMap 缓存目录路径，避免为相同层重复计算，提高多次调用时的性能。
::

::note
此函数返回的目录路径均包含尾部斜杠，以确保一致性。
::

---

- [源码](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/layers.ts)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.