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

2023-11-04 09:00:48 +08:00
 zficode

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

const router = new Router({
  routes
})

const routes = [
	...
]

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

  1. ast 解析,较为麻烦,需要考虑父路由 path 拼接 请问有更好的方式吗
1540 次点击
所在节点    Vue.js
8 条回复
xiaoriri666
2023-11-04 09:32:49 +08:00
一般是这么处理的,新建个文件夹,然后所有的静态路由都放在这个文件夹下,然后用 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
2023-11-04 10:45:15 +08:00
做这个是想和 react-router 还是 remix 里那个功能一样么? 按照文件路径直接生成 router
zficode
2023-11-04 11:05:09 +08:00
@alleluya 就是从一个 vue 项目中扫描出哪些文件为路由文件,得到它的路由地址( path)
kamilic
2023-11-04 12:08:54 +08:00
1. AST 可以的,写代码分析下树。
2. 另外一种方式,我开个脑洞。我觉得你可以在实际代码的运行时中拿一下 vue-router 的实例,钻进去看看最终生成的路由列表,webpack 和 vite 打包的模块导出应该也会找到文件信息的,但是这个我不确定,可以一试。
lyc575757
2023-11-04 12:19:48 +08:00
可以试试 unplugin-vue-router 这个插件,不需要再写路由配置文件了,会基于文件自动生成路由
lyc575757
2023-11-04 12:21:57 +08:00
@lyc575757 看错需求了 忽略
leokun
2023-11-04 13:00:01 +08:00
在 rollup 和 vite 中都有一个 ResolveIdHook 的钩子,第二个参数就是 importer
创建一个虚拟模块,内容为「以 importer 为路由入口的文件列表」可能就是你要的东西
tianzi123
2023-11-06 02:54:33 +08:00
看看这个  https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/router/routes/index.ts    个人觉得字节这个admin算是写得比较好的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/988503

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX