位置: IT常识 - 正文
vue3 动态加载组件、动态引入组件(vuejs动态加载组件)
编辑：rootadminvue3 动态加载组件、动态引入组件 
本文链接地址:https://www.jiuchutong.com/zhishi/288931.html
转载请保留说明！
推荐整理分享vue3 动态加载组件、动态引入组件(vuejs动态加载组件)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue动态加载组件,vue动态加载div,vue3动态加载组建到body上,vue动态加载vue文件,vuejs动态加载组件,vue3 动态加载组件,vue3 动态加载组件,vue3动态加载组建到body上,内容如对您有帮助，希望把文章链接给更多的朋友！
1.问题 在做一个用vite构建的vue3项目时，动态拉取导入.vue页面，然后控制台一直有以下提示，页面也无法渲染出来。 2.分析 根据上面的报错提示，让我们安装并使用：@rollup/plugin-dynamic-import-vars 这个插件（最终没有这个方案）。
Vite官方文档说需要使用Glob 导入形式，然后看了一个Glob的文档，解决了这个问题（亲测可行）。
首先需要使用特殊的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('../views/*/*.vue');他会匹配并导入所有相关的组件：
// vite 生成的代码const modules = { './views/foo.vue': () => import('./views/foo.vue'), './views/bar.vue': () => import('./views/bar.vue')}那么回到项目中，在home文件夹下的index.vue文件中导入custom_components文件夹下的所有.vue文件 因此，根据vite的import.meta.glob函数：就可以获得对应的custom_components文件夹下的.vue文件
const changeComponents = (e:string)=>{const link = modules[`../custom_components/${e}.vue`]console.log(link,'link')}打印link可以看到 最后就是异步注册组件
layouts.value = markRaw(defineAsyncComponent(link))3.最后 下面贴出完整案例，仅供参考。有更好的或者需要优化的可以提问一起探讨。
<template><div @click="changeComponents('kk')">显示kk.vue</div><div @click="changeComponents('index')">显示index.vue</div><component :is="layouts"/></template><script lang='ts' setup>const modules = import.meta.glob('../custom_components/*.vue');let layouts = ref<any>(null)const changeComponents = (e:string)=>{const link = modules[`../custom_components/${e}.vue`] layouts.value = markRaw(defineAsyncComponent(link))}</script>上一篇：黑尾塍鹬，荷兰 (© Edward van Altena/Minden Pictures)(黑尾鮰鱼)
下一篇：idea为web项目添加tomcat并配置Artifacts(idea添加web项目)
