import.meta.glob

基于Vite（Vue 3 默认构建工具），用于动态导入模块，特别是当你需要批量导入文件或模块时.

const modules = import.meta.glob('/path/to/files/**/*.js');

注意：import.meta.glob 是针对 源代码（src 目录） 下的文件进行处理的，而不支持直接在 public 目录 上使用。why？在 src 目录下的文件会经过 Vite 的构建过程，可以被打包、优化，并且支持动态导入，而public 目录下的文件在构建时会直接被复制到输出目录中，Vite 不会对这些文件进行打包或模块化处理。

使用 import.meta.glob 预加载 src 目录中的图片

<script>
// 假设你将图片放在 `src/assets/image/` 目录
const images = import.meta.glob('/src/assets/image/*.{jpg,png,gif}');
for (const path in images) {
  images[path]().then((module) => {
    console.log('加载图片模块', module);
    // 可以使用 module 默认导出的路径来预加载图片
    module.default;
    // console.log('图片路径', module.default);
  });
}


</script>

直接在模板中使用 public 目录的图片

<!-- public 目录下的文件会被直接拷贝到输出目录中，可以通过直接引用路径来访问 -->
<img src="/images/my-image.jpg" alt="My Image" />

使用 fetch 或 Image 对象预加载 public 目录中的图片

// 使用 Image 对象预加载图片
const image = new Image();
image.src = '/images/my-image.jpg';  // public 目录中的图片路径
image.onload = () => {
  console.log('图片已加载');
};