層

原始檔
Nuxt Kit 提供了實用工具，幫助您處理層及其目錄結構。

Nuxt 層提供了一種強大的方式來在專案之間共享和擴充套件功能。在使用模組中的層時，您通常需要訪問每個層的目錄路徑。Nuxt Kit 提供了 getLayerDirectories 實用工具來訪問 Nuxt 應用程式中所有層的解析目錄路徑。

getLayerDirectories

獲取 Nuxt 應用程式中所有層的解析目錄路徑。此函式提供了一種結構化的方式來訪問層目錄，而無需直接訪問私有的 nuxt.options._layers 屬性。

使用

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

型別

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：一個包含層解析目錄路徑的物件。

屬性型別描述
rootstring層的根目錄（等同於 rootDir）
伺服器string用於 Nitro 伺服器端程式碼的伺服器目錄
modulesstring本地模組目錄
sharedstring用於客戶端和伺服器共享程式碼的共享目錄
appstring層的源目錄（等同於 srcDir）
publicstring用於靜態資源的公共目錄
appLayoutsstringVue 佈局元件的佈局目錄
appMiddlewarestring路由中介軟體的中介軟體目錄
appPagesstring用於基於檔案路由的頁面目錄
appPluginsstringNuxt 外掛的外掛目錄

示例

處理所有層的檔案

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

從多個層新增模板

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

遵循層優先順序

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

檢查特定於層的目錄

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`)
  },
})
getLayerDirectories 函式透過 WeakMap 包含快取，以避免重複計算相同層的目錄路徑，從而在多次呼叫時提高效能。
此函式返回的目錄路徑始終包含尾部斜槓以保持一致性。