vite 动态导入页面 动态import组件

1,在做权限的时候,从后台拉路由表,然后动态引入组件,之前webpack是可以直接用的,但是vite不行,需要用特殊的方法

//引入所有views下.vue文件
const modules = import.meta.glob("../views/**/**.vue");

/**
 * 解析路由表
 * @param routerMap 后台请求的路由表
 * @returns 系统路由
 */
export const routerFilterFunc = (routerMap: RouterItem[]) => {
  const arr: RouterItem[] = [];
  routerMap.forEach(item => {
    const obj: RouterItem = {
      ...item,
      beforeComponent: item.component
    };
    if (obj.children) {
      obj.children = routerFilterFunc(obj.children);
    }
    if (item.component == "Layout") {
      obj.component = RouterView;
    } else {
      const component = modules[`../views/${obj.component}.vue`] as any;
      if (component) {
        obj.component = modules[`../views/${obj.component}.vue`];
      } else {
        obj.component = () => import("@/views/404.vue");
      }
    }
    arr.push(obj);
  });
  return arr;
};

这是 import.meta.glob("../views/**/**.vue")获取的内容

 

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vite 是一个快速、简单且现代的前端构建工具。在使用 Vite 进行开发时,我们通常会用到许多公共组件,为了方便使用这些组件,在 Vite 中可以实现自动导入并使用公共组件Vite 提供了一个特性,即可以使用插件来自动导入和注册公共组件。在 Vite 的配置文件中,我们可以添加一个名为 Plugins 的选项,并在该选项中配置插件。 为了实现自动导入和使用公共组件,我们可以使用一个插件,例如 Vite Plugin AutoImport。通过安装并配置这个插件,我们可以自动导入我们所需的公共组件,而无需在每个组件中手动导入。 首先,我们需要使用 npm 或者 yarn 安装 Vite Plugin AutoImport: npm install vite-plugin-auto-import 然后,在 Vite 的配置文件中添加以下配置: import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import AutoImport from 'vite-plugin-auto-import'; export default defineConfig({ plugins: [ vue(), AutoImport({ imports: [ { 'importName': '组件路径' }, // 可以添加多个需要自动导入组件路径 ], }), ], }); 在上面的配置中,我们用 `imports` 选项来配置需要自动导入组件路径和组件在代码中的导入名称。我们只需要指定组件的路径,然后这个插件就会自动帮我们在需要使用的地方导入。 配置完成后,我们可以在我们的代码中直接使用所需的公共组件,无需手动导入。当我们在写代码时需要使用某个组件时,只需要按照指定的 `importName` 使用即可。 总而言之,通过 Vite Plugin AutoImport 插件,我们可以实现在 Vite 中自动导入并使用公共组件。这样可以大大提升开发效率,使代码更加简洁。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值