vite动态导入页面动态import组件实现方式

更新时间：2026年04月29日 09:19:18 作者：yangliweigauguagua

本文总结了在使用Vite进行动态导入页面和组件时遇到的问题,由于Vite与Webpack在处理动态import方面有所不同,需要采用特殊方法,文章强调了从后台获取路由表并动态引入组件的实践方法

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

在做权限的时候

从后台拉路由表，然后动态引入组件，之前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")

获取的内容

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3在css中使用v-bind绑定js/ts变量(在scss和less中使用方式)
v-bind是Vue.js中的一个核心指令,用于在Vue组件或DOM元素上绑定数据属性,下面这篇文章主要给大家介绍了关于Vue3在css中使用v-bind绑定js/ts变量的相关资料,也可以在scss和less中使用方式,需要的朋友可以参考下
2024-04-04
vue3实现按钮级别权限控制的两种方法
本文给大家介绍vue3实现按钮级别权限控制的两种方法,每种方法结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2025-08-08
Vue-cli3中使用TS语法示例代码
typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法，需要传什么值，返回值是什么类型一目了然，这篇文章主要介绍了Vue-cli3中使用TS语法示例代码,需要的朋友可以参考下
2023-02-02
一文轻松理解Vuex
这篇文章主要介绍了Vuex及其使用方法，感兴趣的同学，可以参考下
2021-04-04
vue实现短信验证码登录功能（流程详解）
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，这篇文章主要介绍了基于vue实现短信验证码登录功能,需要的朋友可以参考下
2019-12-12
如何在 ant 的table中实现图片的渲染操作
这篇文章主要介绍了如何在 ant 的table中实现图片的渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue实现简单的跑马灯效果
这篇文章主要为大家详细介绍了vue实现简单的跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
vue3中组件传值的多种方法总结
学习过vue2的宝子们肯定知道,组件传值是vue项目开发过程中必不可少的功能场景,下面这篇文章主要给大家介绍了关于vue3中组件传值的多种方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01
使用vscode 开发uniapp的方法
本文给大家分享我使用vscode开发的一些配置。其中包括uniapp组件语法提示，uniapp代码提示，代码自动格式化问题，对vscode 开发uniapp的相关知识感兴趣的朋友一起看看吧
2021-08-08
vue实现录音并转文字功能包括PC端web手机端web(实现过程)
vue实现录音并转文字功能,包括PC端,手机端和企业微信自建应用端,本文通过实例代码介绍vue实现录音并转文字功能包括PC端web手机端web,感兴趣的朋友跟随小编一起看看吧
2024-08-08