vue3+vite+ts项目

174 阅读1分钟

动态引入指定文件夹下的文件以及动态使用组件

blog.csdn.net/xixihahakky… 1.问题
在做一个用vite构建的vue3项目时,动态拉取导入.vue页面,然后控制台一直有以下提示,页面也无法渲染出来。

image.png 2.分析 根据上面的报错提示,让我们安装并使用:@rollup/plugin-dynamic-import-vars 这个插件(最终没有这个方案)。

Vite官方文档说需要使用Glob 导入形式,然后看了一个Glob的文档,解决了这个问题(亲测可行)。

首先需要使用特殊的import.meta.glob函数从文件系统导入多个模块:

image.png

他会匹配并导入所有相关的组件:

image.png

那么回到项目中,在home文件夹下的index.vue文件中导入custom_components文件夹下的所有.vue文件

image.png

因此,根据vite的import.meta.glob函数:就可以获得对应的custom_components文件夹下的.vue文件

image.png

打印link可以看到

image.png

最后就是异步注册组件

image.png

3.最后
下面贴出完整案例,仅供参考。有更好的或者需要优化的可以提问一起探讨。

image.png

项目中实际应用

image.png