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
可以看到
最后就是异步注册组件文章来源:https://www.toymoban.com/news/detail-406383.html
layouts.value = markRaw(defineAsyncComponent(link))
3.最后
下面贴出完整案例,仅供参考。有更好的或者需要优化的可以提问一起探讨。文章来源地址https://www.toymoban.com/news/detail-406383.html
<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 动态加载组件、动态引入组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!