需求: 根据本地文件自动生成router插件引入
实现方式： 1、制定约定规则，只生成某文件(bi业务文件夹)下的index.vue文件为页面文件

webpack实现方式

使用require.context方式

// 获取文件
const files = require.context('@/biz/views', true, /index\.vue/)
const routes = []

files.keys().forEach(key => {
    const routerPath = `/${key.replace(/(\.\/|\/index\.vue)/g, '')}`
    const file = files(key).default || files(key) || {}
    
    routes.push({
        path: routerPath,
        component: file
    })
})

export default routes

vite 实现方式

1、import.meta.glob('filePath')
2、import.meta.globEager('filePath')

glob匹配到的文件默认都是懒加载，构建都会分离为单独的chunk。如果直接引入所有的模块则使用globEager

// 获取文件
const bizFiles = import.meta.globEager('@/views/biz/**/index.vue')
const routes = []

for (let key in bizFiles) {
  const file = bizFiles[key].default || bizFiles[key]
  let path = (file.__file.match(/biz\/.*?(?=\/index)/))[0]
  path = path.replace(/^biz/g, '')
  routes.push({
    path,
    meta: {
      title: file.name || path.replace(/\//g, '_')
    },
    component: file
  })
}

export default routes

vite 引入文件夹组件

为了代码的简便性，同理的，可以通过import.meta.glob来一次注册多个组件 vue3.x<script setup>和普通的 <script>是可以共用的

<script>
const comfiles = import.meta.globEager('./modules/*.vue')
const com = {}
for (let key in comfiles) {
  const file = comfiles[key].default || comfiles[key]
  let name = (file.__file.match(/k\-(.*)(?=\.)/)[0])
  com[name] = file
}
export default {
  components: com
}
</script>