vue3 vite2 文件懒加载 | 静态导入

vue3+vite 使用import报错,看了文档。

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

import.meta.glob 匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk. import.meta.globEager为同步加载，可按需引用这两个方法。

懒加载

const files = import.meta.glob('../demo/*.vue')
console.log(files)

files数据如下：

\

引入方式：

<component :is="data.chartComponent.default"></component>

<script lang="ts" setup>
...
const setData = async (item: chartItemTypes) => {
    data.chartComponent = await files[item.src]()
}
...
</script>

同步加载

const files = import.meta.globEager('../demo/*.vue')
console.log(files)

files数据：

引入方式

<component :is="data.chartComponent.default"></component>

<script lang="ts" setup>
...
const setData = (item: chartItemTypes) => {
    data.chartComponent = files[item.src]
}
...
</script>