使用vite的GlobImport动态导入多个vue页面

在之前的代码如下:

1
2
3
4
5
const components = {
Workplace: () => import('/@/views/Dashboard/Workplace.vue'),
Login: () => import('/@/views/User/Login.vue'),
// ...
}

使用Glob Import改写代码

1
2
3
4
5
6
7
8
9
10
11
const modules = import.meta.glob('../views/**/**.vue')
const components = {}
Object.keys(modules).forEach(key => {
const nameMatch = key.match(/^\.\.\/views\/(.+)\.vue/)
if(!nameMatch) return
// 如果页面以Index命名,则使用父文件夹作为name
const indexMatch = nameMatch[1].match(/(.*)\/Index$/i)
let name = indexMatch ? indexMatch[1] : nameMatch[1];
[name] = name.split('/').splice(-1)
components[name] = modules[key]
})

改完之后即可把views文件夹下的所有vue文件自动生成映射关系

vite官网
项目地址

0%