vue3.0实现动态加载静态资源、解决打包静态资源丢失问题

  // 1. 基本异步导入
  const modules = import.meta.glob('../../../assets/map_icon/icon_map*.png');

  function loadModules() {
    // 遍历所有匹配的模块
    for (const path in modules) {
      // 等待模块加载完成
      const module = modules[path]();
      // 输出模块路径和内容
      console.log('模块路径:', path);
      console.log('模块内容:', module);
    }
  }
  // 2.调用加载
  onMounted(() => {
    loadModules();
  });

  // 3.直接调用
  function getIcon(iconName) {
    IconSrc = new URL(`../../../assets/map_icon/${iconName}.png`, import.meta.url).href;
  }

原理就是，直接第三步调用本地文件，会出现undefined问题，或者打包时，按需打包，没把动态要加载的图片打包，导致缺失图片。
所以执行第一步和第二步，就是直接加载所有资源，来解决undefined问题和打包问题。