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 
}

1
2
3
4
5
6
7
8
9

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
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4、全局注册api(main.ts)

// 所有api接口
import api from "@/api";
let instance = createApp(App);
// 注册全局api方法
instance.config.globalProperties.$api = api;
1
2
3
4
5

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();
});
1
2
3
4
5
6
7
8
9
10
11
12
13

6、最终效果

相关文章

Vue3 + Vite + Ts开源后台管理系统模板

---

基于ElementUi或AntdUI再次封装基础组件文档

---

基于Element-plus再次封装基础组件文档(vue3+ts)