---
title: "图层"
description: "Nuxt Kit 提供了用于帮助您处理图层及其目录结构的实用工具。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/kit/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()

    // Access directories from all layers
    for (const [index, layer] of layerDirs.entries()) {
      console.log(`Layer ${index}:`)
      console.log(`  Root: ${layer.root}`)
      console.log(`  App: ${layer.app}`)
      console.log(`  Server: ${layer.server}`)
      console.log(`  Pages: ${layer.appPages}`)
      // ... other directories
    }
  },
})
```

### 类型

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

interface LayerDirectories {
  /** Nuxt rootDir (`/` by default) */
  readonly root: string
  /** Nitro source directory (`/server` by default) */
  readonly server: string
  /** Local modules directory (`/modules` by default) */
  readonly modules: string
  /** Shared directory (`/shared` by default) */
  readonly shared: string
  /** Public directory (`/public` by default) */
  readonly public: string
  /** Nuxt srcDir (`/app/` by default) */
  readonly app: string
  /** Layouts directory (`/app/layouts` by default) */
  readonly appLayouts: string
  /** Middleware directory (`/app/middleware` by default) */
  readonly appMiddleware: string
  /** Pages directory (`/app/pages` by default) */
  readonly appPages: string
  /** Plugins directory (`/app/plugins` by default) */
  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` | 用于静态资源的 public 目录      |
| `appLayouts`    | `string` | Vue 布局组件的 layouts 目录   |
| `appMiddleware` | `string` | 路由中间件的 middleware 目录   |
| `appPages`      | `string` | 基于文件路由的 pages 目录       |
| `appPlugins`    | `string` | Nuxt 插件的 plugins 目录    |

### Example

**处理来自所有图层的文件：**

```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()

    // Find all component files across layers
    // Note: layerDirs[0] is the user layer (highest priority)
    // Later layers in the array have lower priority
    const componentFiles = []
    for (const [index, layer] of layerDirs.entries()) {
      const files = await globby('**/*.vue', {
        cwd: resolve(layer.app, 'components'),
        absolute: true,
      })
      console.log(`Layer ${index} (${index === 0 ? 'user' : 'base'}):`, files.length, 'components')
      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()

    // Add a config file from each layer that has one
    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()

    // Find the first (highest priority) layer that has a specific config file
    // This respects the layer priority system
    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(`Using config from layer: ${dirs.root}`)
        break // Use the first (highest priority) config found
      }
    }

    // Alternative: Collect configs from all layers, with user layer taking precedence
    const allConfigs = {}
    for (const dirs of layerDirs.reverse()) { // Process from lowest to highest priority
      const configPath = resolve(dirs.app, 'my-config.json')
      if (existsSync(configPath)) {
        const config = JSON.parse(readFileSync(configPath, 'utf-8'))
        Object.assign(allConfigs, config) // Later assignments override earlier ones
      }
    }
  },
})
```

**检查特定图层目录是否存在：**

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

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

    // Find layers that have a specific custom directory
    const layersWithAssets = layerDirs.filter((layer) => {
      return existsSync(resolve(layer.app, 'assets'))
    })

    console.log(`Found ${layersWithAssets.length} layers with assets directory`)
  },
})
```

::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.