图层

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

Maschinelle Übersetzung ·0 % geprüft

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

getLayerDirectories

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

用法

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

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

    // Auf Verzeichnisse aller Layer zugreifen
    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}`)
      // ... weitere Verzeichnisse
    }
  },
})

类型

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

interface LayerDirectories {
  /** rootDir von Nuxt (standardmäßig `/`) */
  readonly root: string
  /** Nitro-Quellverzeichnis (standardmäßig `/server`) */
  readonly server: string
  /** Verzeichnis für lokale Module (standardmäßig `/modules`) */
  readonly modules: string
  /** Shared-Verzeichnis (standardmäßig `/shared`) */
  readonly shared: string
  /** Public-Verzeichnis (standardmäßig `/public`) */
  readonly public: string
  /** srcDir von Nuxt (standardmäßig `/app/`) */
  readonly app: string
  /** Layouts-Verzeichnis (standardmäßig `/app/layouts`) */
  readonly appLayouts: string
  /** Middleware-Verzeichnis (standardmäßig `/app/middleware`) */
  readonly appMiddleware: string
  /** Seitenverzeichnis (standardmäßig `/app/pages`) */
  readonly appPages: string
  /** Plugins-Verzeichnis (standardmäßig `/app/plugins`) */
  readonly appPlugins: string
}

参数

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

返回值

getLayerDirectories 函数返回一个 LayerDirectories 对象数组，每个图层对应一个对象。

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

  • 第一个图层是用户/项目图层（最高优先级）
  • 数组中较早的图层会覆盖较晚的图层
  • 基础图层出现在数组的最后（最低优先级）

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

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

属性类型描述
rootstring图层的根目录（等同于 rootDir）
serverstring用于 Nitro 服务端代码的服务器目录
modulesstring本地模块目录
sharedstring同时被客户端和服务器使用的共享目录
appstring图层的源代码目录（等同于 srcDir）
publicstring用于静态资源的 public 目录
appLayoutsstringVue 布局组件的 layouts 目录
appMiddlewarestring路由中间件的 middleware 目录
appPagesstring基于文件路由的 pages 目录
appPluginsstringNuxt 插件的 plugins 目录

Beispiel

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

// @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()

    // Alle Komponentendateien über alle Layer hinweg finden
    // Hinweis: layerDirs[0] ist der Layer der Nutzenden (höchste Priorität)
    // Spätere Layer im Array haben eine niedrigere Priorität
    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)
    }
  },
})

从多个图层添加模板：

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

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

    // Eine Konfigurationsdatei aus jedem Layer hinzufügen, der eine besitzt
    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,
        })
      }
    }
  },
})

遵循图层优先级：

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

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

    // Den ersten Layer (mit der höchsten Priorität) finden, der eine bestimmte Konfigurationsdatei besitzt
    // Dadurch wird das Prioritätssystem der Layer berücksichtigt
    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 // Die zuerst gefundene Konfiguration (mit der höchsten Priorität) verwenden
      }
    }

    // Alternative: Konfigurationen aus allen Layern sammeln, wobei der Layer der Nutzenden Vorrang hat
    const allConfigs = {}
    for (const dirs of layerDirs.reverse()) { // Von der niedrigsten zur höchsten Priorität verarbeiten
      const configPath = resolve(dirs.app, 'my-config.json')
      if (existsSync(configPath)) {
        const config = JSON.parse(readFileSync(configPath, 'utf-8'))
        Object.assign(allConfigs, config) // Spätere Zuweisungen überschreiben frühere
      }
    }
  },
})

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

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

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

    // Layer finden, die ein bestimmtes benutzerdefiniertes Verzeichnis besitzen
    const layersWithAssets = layerDirs.filter((layer) => {
      return existsSync(resolve(layer.app, 'assets'))
    })

    console.log(`Found ${layersWithAssets.length} layers with assets directory`)
  },
})
getLayerDirectories 函数通过 WeakMap 实现了缓存，以避免对相同图层重复计算目录路径，从而在多次调用时提高性能。
此函数返回的目录路径始终包含尾随斜杠以保持一致性。