vite从文件系统导入多个模块

官方文档：

https://cn.vitejs.dev/guide/features.html#glob-import

 

 

导入模块：

import.meta.glob 为过动态导入，构建时，会分离为独立的 chunk

const files = import.meta.glob('./modules/*.js')
const modules = {}
for (const key in files) {
    files[key]().then(res=>{
        modules[key.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')] = res.default
    })
}

Object.keys(modules).forEach(item => {
    modules[item]['namespaced'] = true
})

export default createStore({
    modules
})

 

import.meta.globEager 为直接引入

const files = import.meta.globEager('./modules/*.js')

const modules = {}
for (const key in files) {
    modules[key.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')]=files[key].default
}

Object.keys(modules).forEach(item => {
  // 为每个模块添加一个前缀名，保证模块命明不冲突 
    modules[item]['namespaced'] = true
})

 

总结：

1.import.meta.glob 或 import.meta.globEager 导入需要导入的文件，注意路径匹配
2.遍历files，根据导入方式做不同的处理
3.方法不限于vuex的模块导入，这里只是简单的例子