官方文档:
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的模块导入,这里只是简单的例子