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

This topic created in 921 days ago, the information mentioned may be changed or developed.

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

const router = new Router({ routes }) const routes = [ ... ]

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

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

脚手架

文件

const

Vue

8 replies 2023-11-06 02:54:33 +08:00

xiaoriri666

Nov 4, 2023

一般是这么处理的，新建个文件夹，然后所有的静态路由都放在这个文件夹下，然后用 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
```