Vite中public资源编译：map遍历生成URL路径与逐个生成路径的结果差异问题

嘿，这个问题我之前折腾过好一阵！核心原因其实是Vite对静态资源的静态分析机制在两种写法下的处理逻辑不一样，咱们一步步拆解来看：

首先先明确你的两种写法：

第一种（出现错误路径的写法）：

const imageList = [
    "Wildcard.png",
    "Diamonds.png",
    "Hearts.png",
    "Spades.png",
    "Clubs.png"
].map((v) => new URL(`/img/${v}`, import.meta.url).href);

第二种（能生成正确路径的写法）：

const imageList = [
    new URL("/img/Wildcard.png", import.meta.url).href,
    new URL("/img/Diamonds.png", import.meta.url).href,
    new URL("/img/Hearts.png", import.meta.url).href,
    new URL("/img/Spades.png", import.meta.url).href,
    new URL("/img/Clubs.png", import.meta.url).href,
];

为什么两种写法结果不同？ #

• 第二种写法的正确逻辑：
  每个new URL("/img/xxx.png", import.meta.url)都是完全明确的静态路径，Vite在构建或开发时的静态分析器能直接识别这些路径，将它们关联到你public/img目录下的对应资源，最终正确替换成构建后的资源路径（比如/example-project/img/Wildcard.png）。

• 第一种写法出错的原因：
  你用了模板字符串/img/${v}来动态拼接路径，这里的v是遍历数组时的变量。Vite的静态分析器不会深入去解析数组里的具体元素值（它只会识别代码结构，不会执行代码去拿变量内容），所以它没办法把这个动态生成的路径和public目录下的资源关联起来。
  在这种情况下，Vite无法正确处理这个动态路径，构建时就会出现路径替换失败的情况，最终输出/example-project/assets/undefined；而在开发环境下，它可能会 fallback 到当前模块所在的目录（比如/src/components/），再加上未正确解析的变量值（也就是undefined），就出现了你说的/src/components/undefined这种奇怪路径。

怎么解决这个问题？ #

如果你想保留批量遍历的写法，推荐用Vite官方提供的import.meta.glob来批量处理静态资源，这是专门用来批量导入资源的方案，能完美适配Vite的静态分析机制：

// 批量获取img目录下所有png图片的URL
const imageMap = import.meta.glob('/img/*.png', { eager: true, as: 'url' });
// 把map的值转成数组，就是你需要的imageList
const imageList = Object.values(imageMap);

这样写既能批量处理资源，又能保证Vite正确解析路径，生成的结果和你第二种写法完全一致。

备注：内容来源于stack exchange，提问作者Fadhli890