确实,在 Vite 3.0 及之后的版本中,import.meta.globEager
已被弃用。为了实现类似的功能,你可以使用 import.meta.glob
并结合 Object.values
或 Promise.all
进行处理。以下是新的推荐方式:
1. 使用 import.meta.glob
替代 import.meta.globEager
虽然 import.meta.globEager
被弃用,但我们可以手动将 import.meta.glob
返回的模块立即导入。
示例代码:
<template>
<div>
<div v-for="(src, index) in imageSources" :key="index">
<img :src="src" :alt="`Image ${index}`" />
</div>
</div>
</template>
<script setup lang="ts">
// 使用 import.meta.glob 获取所有图片模块
const images = import.meta.glob('@/assets/images/*.jpg', { eager: true });
const imageSources = Object.values(images).map((module) => module.default);
</script>
// 旧的方式
// const modules = import.meta.globEager('./path/to/files/*.js');
// 新的方式
const modules = import.meta.glob('./path/to/files/*.js', { eager: true });
2. 延迟加载图片
如果你希望延迟加载图片而不是在一开始就加载所有图片,可以使用 import.meta.glob
返回的动态导入函数,并在使用时加载:
<template>
<div>
<div v-for="(src, index) in imageSources" :key="index">
<img :src="src" :alt="`Image ${index}`" />
</div>
</div>
</template>
<script setup lang="ts">
const images = import.meta.glob('@/assets/images/*.jpg');
const imageSources = await Promise.all(
Object.values(images).map(loader => loader().then(module => module.default))
);
</script>
3. Vite 配置调整(可选)
如果你在使用 Vite 时遇到需要调整的构建选项,可以根据具体需求在 vite.config.ts
文件中进行配置。
4. 完整代码示例
以下是完整的代码示例,包括延迟加载图片和立即加载图片两种方式:
<template>
<div>
<!-- 即时加载的方式 -->
<div v-for="(src, index) in eagerImageSources" :key="`eager-${index}`">
<img :src="src" :alt="`Eager Image ${index}`" />
</div>
<!-- 延迟加载的方式 -->
<div v-for="(src, index) in lazyImageSources" :key="`lazy-${index}`">
<img :src="src" :alt="`Lazy Image ${index}`" />
</div>
</div>
</template>
<script setup lang="ts">
// 即时加载
const eagerImages = import.meta.glob('@/assets/images/*.jpg', { eager: true });
const eagerImageSources = Object.values(eagerImages).map((module) => module.default);
// 延迟加载
const lazyImages = import.meta.glob('@/assets/images/*.jpg');
const lazyImageSources = await Promise.all(
Object.values(lazyImages).map(loader => loader().then(module => module.default))
);
</script>
总结
- 使用
import.meta.glob
加载资源,而不是import.meta.globEager
。 import.meta.glob
结合Promise.all
和Object.values
可以实现类似于import.meta.globEager
的效果。