vue3 动态加载组件、动态引入组件

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>

vue3 动态加载组件、动态引入组件相关推荐

go语言不支持动态加载_动态语言支持
go语言不支持动态加载本文是我们名为" 高级Java "的学院课程的一部分. 本课程旨在帮助您最有效地使用Java. 它讨论了高级主题,包括对象创建,并发,序列化,反射等. 它 ...
php动态加载js,动态加载script文件的两种方法_javascript技巧
动态加载script到页面大约有俩方法第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...
动态加载___import__动态加载技术
__import__ 可以实现模块的动态加载,Python中很多框架都使用了这种能力,如Flask的插件系统.APScheduler定时任务框架等. 这里简单看一下APScheduler定时任务框架是 ...
java动态加载js_动态加载JavaSript
在许多情况下,需要使用动态插入脚本的方式 1. 跨域访问:不同域下的脚本不能够通过该AJAX方式直接获得 2.延迟加载或预加载:由于浏览器会等所有外链脚本加载完才开始解析.为了提高用户响应速度和用户体 ...
qml入门学习(八)：通过loader对象动态加载和移除组件
DynamicBtn.qml: import QtQuick 2.7 import QtQuick.Controls 2.0Button {id: btnproperty var backColor: ...
easyui tree动态加载_动态路由:Gin vs SpringMVC
这两天在接触Gin,对它的动态路由功能比较感兴趣,特意做了笔记,顺便跟SpringMVC作下对比. 1.简介 Gin是使用Go/golang语言实现的HTTP Web框架.接口简洁,性能极高.截止 ...
netcore实践：跨平台动态加载native组件
缘起netcore框架下实现基于zmq的应用.在.net framework时代,我们进行zmq开发由很多的选择,比较常用的有clrzmq4和NetMQ. 其中clrzmq是基于libzmq的Inte ...
【Android 逆向】加壳技术简介 ( 动态加载 | 第一代加壳技术 - DEX 整体加固 | 第二代加壳技术 - 函数抽取 | 第三代加壳技术 - VMP / Dex2C | 动态库加壳技术 )
文章目录一.动态加载二.第一代加壳技术 ( DEX 整体加固 ) 三.第二代加壳技术 ( 函数抽取 ) 四.第三代加壳技术 ( Java 函数 -> Native 函数 ) 五.so 动态库 ...
Android动态加载技术
基本信息 Author:kaedea GitHub:android-dynamical-loading 我们很早开始就在Android项目中采用了动态加载技术,主要目的是为了达到让用户不用重新安装AP ...
OSGI动态加载删除Service bundle
OSGi模块化框架是很早就出来的一个插件化框架,最早Eclipse用它而出名,但这些年也没有大热虽然OSGi已经发布了版本1到版本5.现在用的最多的,也是本文讲述基于的是Equinox的OSGi实现, ...

vue3 动态加载组件、动态引入组件

vue3 动态加载组件、动态引入组件相关推荐

最新文章

热门文章