vue 脚手架页面文件列表读取

[zficode]

在 vue 搭建的脚手架中，通过 vue-router 标记哪些文件为页面文件，例如：

const router = new Router({
  routes
})

const routes = [
	...
]

现在想拿到脚手架中哪些文件为路由文件和它的路由信息，包括路由 path 和对应的组件地址。 目前已知方式：

1. ast 解析，较为麻烦，需要考虑父路由 path 拼接 请问有更好的方式吗

[xiaoriri666]

一般是这么处理的，新建个文件夹，然后所有的静态路由都放在这个文件夹下，然后用 import.meta.glob 导入，参考如下代码
```js
const models = import.meta.glob('./*.js', {eager: true})

function formatModules(_modules, result) {
Object.keys(_modules).forEach((key) => {
const defaultModule = _modules[key].default;
if (!defaultModule) return;
const moduleList = Array.isArray(defaultModule)
? [...defaultModule]
: [defaultModule];
result.push(...moduleList);
});
return result;
}
const staticRouter = formatModules(models, [])

export default staticRouter
```

[alleluya]

做这个是想和 react-router 还是 remix 里那个功能一样么? 按照文件路径直接生成 router

[zficode]

@alleluya 就是从一个 vue 项目中扫描出哪些文件为路由文件，得到它的路由地址（ path)

[kamilic]

1. AST 可以的，写代码分析下树。
2. 另外一种方式，我开个脑洞。我觉得你可以在实际代码的运行时中拿一下 vue-router 的实例，钻进去看看最终生成的路由列表，webpack 和 vite 打包的模块导出应该也会找到文件信息的，但是这个我不确定，可以一试。

[lyc575757]

可以试试 unplugin-vue-router 这个插件，不需要再写路由配置文件了，会基于文件自动生成路由

[lyc575757]

@lyc575757 看错需求了 忽略

[leokun]

在 rollup 和 vite 中都有一个 ResolveIdHook 的钩子，第二个参数就是 importer
创建一个虚拟模块，内容为「以 importer 为路由入口的文件列表」可能就是你要的东西

[tianzi123]

看看这个　 https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/router/routes/index.ts 　　　个人觉得字节这个ａｄｍｉｎ算是写得比较好的