如何在Nuxt 3中获取所有组件的层级拼接格式名称？

需求场景 #

给定以下多层级组件目录结构：

/components
   /foo
      File.vue
      File2.vue
         /fooTwo
              Anotherfile.vue
   /bar
      File1.vue
      File10.vue

需要生成符合规则的组件名称数组：['FooFile','FooFile2','FooFooTwoAnotherfile','BarFile1','BarFile10']
规则为：将组件相对于components目录的路径各部分（文件夹名、文件名）首字母大写后拼接，同时去掉.vue后缀。

实现方案（Node.js） #

利用Node.js的文件系统模块递归遍历目录，处理每个文件的路径生成目标组件名：

const fs = require('fs');
const path = require('path');

// 指向你的components目录
const componentsDir = path.resolve(__dirname, './components');
const componentNames = [];

function walkDir(currentDir, pathSegments = []) {
  const items = fs.readdirSync(currentDir);
  
  items.forEach(item => {
    const fullPath = path.join(currentDir, item);
    const stats = fs.statSync(fullPath);
    
    if (stats.isDirectory()) {
      // 进入子文件夹，将文件夹名加入路径片段列表
      walkDir(fullPath, [...pathSegments, item]);
    } else if (item.endsWith('.vue')) {
      // 处理Vue文件：先去掉后缀，再将所有路径片段转首字母大写后拼接
      const fileName = item.replace('.vue', '');
      const allSegments = [...pathSegments, fileName];
      const componentName = allSegments.map(seg => seg.charAt(0).toUpperCase() + seg.slice(1)).join('');
      componentNames.push(componentName);
    }
  });
}

// 启动目录遍历
walkDir(componentsDir);
console.log(componentNames);
// 输出结果即为目标数组

关键点说明 #

• 同步遍历写法简单直接，适合中小型组件库；若组件数量极大，可改用异步遍历（搭配fs.promises.readdir和async/await）
• 仅筛选.vue后缀文件，避免混入配置文件、工具脚本等无关内容
• 路径拼接逻辑严格对应目录层级，确保组件名与目录结构完全匹配

内容的提问来源于stack exchange，提问作者K90325248