import.meta.glob实现懒加载

确实，在 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 的效果。