Vue3+vite 使用import.meta.globEager代替require.context实现自动导入api
Vue3+vite 使用import.meta.globEager代替require.context实现自动导入api
·
webpack require.context实现自动导入
Vite方式实现自动导入步骤
1、在src下会有一个api文件夹,结构如下:
2、通常情况下,api文件夹的index.js文件我们通常是这样来引入的
import * as login from './modules/login'
import * as system from './modules/system'
export default {
...login ,
...system
}
3、用import.meta.globEager来自动引入所有的文件,代码如下:
import request from "@/utils/request";
// 自动导入modules
const files: any = import.meta.globEager("./modules/*.ts");
let modules: any = {};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Object.entries(files).forEach(([k, v]) => {
Object.assign(modules, v);
});
// 数据字典-查询 公共api
export const getDicts = (dictType: any) => {
return request({ url: `/system/dict/data/type/${dictType}`, method: "GET" });
};
export default {
getDicts,
...modules
};
4、全局注册api(main.ts)
// 所有api接口
import api from "@/api";
let instance = createApp(App);
// 注册全局api方法
instance.config.globalProperties.$api = api;
5、页面使用
const { appContext } = getCurrentInstance() as any;
const global = appContext.config.globalProperties;
// 获取菜单数据
const getMenuData = async () => {
const res = await global.$api.getRouters();
// console.log(999, res);
if (res.success) {
state.table.data = res.data;
}
};
onMounted(() => {
getMenuData();
});
6、最终效果
相关文章
更多推荐
已为社区贡献10条内容
所有评论(0)