如何在Vite中获取src/pages下含子文件夹的.vue文件列表？

我的src/pages文件夹下包含多个子文件夹及若干.vue组件，此前使用Webpack时，可通过以下代码获取页面路径与名称列表：

export default require
  .context("../pages", true, /^\.\/.*\.vue$/)
  .keys()
  .map(page => page.slice(2).replace(".vue", ""))
  .filter(page => page !== "Index")
  .map(page => ({
    file: page,
    title: createTitle(page),
    path: slugify(kebabCase(page))
  }));

但Vite不支持该方式，我尝试使用const pages = import.meta.glob('../pages/*.vue')，仅能获取根目录下的文件，无法获取子文件夹内的文件。请问如何在Vite中实现该需求？

解决方案 #

要在Vite中递归匹配所有子文件夹内的.vue文件，核心是使用通配符**实现深度遍历，以下是具体实现：

1. 递归匹配所有Vue文件 #

使用import.meta.glob的递归语法，匹配pages目录下所有层级的.vue文件：

// 匹配pages目录及所有子目录下的.vue文件
const pages = import.meta.glob('../pages/**/*.vue', { eager: true })

• **：表示匹配任意层级的子目录
• { eager: true }：开启立即加载模式，和Webpack的require.context同步加载行为一致；若不需要同步加载，可移除该参数，此时返回的是模块的懒加载函数

2. 转换为目标格式 #

按照原Webpack代码的逻辑处理路径，生成包含文件路径、标题、路由路径的列表：

import { kebabCase } from 'lodash'
import slugify from 'slugify'

// 自定义标题生成函数，可根据需求调整
function createTitle(pagePath) {
  return pagePath.split('/')
    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
    .join(' - ')
}

export default Object.keys(pages)
  // 裁剪路径：去掉前缀'../pages/'和后缀'.vue'
  .map(page => page.replace('../pages/', '').replace('.vue', ''))
  // 排除Index页面
  .filter(page => page !== 'Index')
  // 生成目标结构
  .map(page => ({
    file: page,
    title: createTitle(page),
    path: slugify(kebabCase(page))
  }))

3. 注意事项 #

• 若你的createTitle、slugify、kebabCase工具函数逻辑不变，可直接复用原代码
• Vite的import.meta.glob返回的键是完整的相对路径，因此需要用replace('../pages/', '')替代原Webpack代码中的slice(2)

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