Vite 6 中 new URL() 与 import.meta.url 路径解析问题解析

在 Vite 6 版本中，开发者们遇到了一个关于静态资源路径解析的重要变化。这个问题主要出现在使用 new URL() 结合 import.meta.url 进行动态资源路径构建的场景中。

在 Vite 5 版本中，开发者可以这样编写代码来动态获取资源路径：

export function getImg(url: string) {
  return new URL(`/src/assets/imgs/${url}`, import.meta.url).href;
}
const logo = getImg('login/logo.svg');

这种写法在 Vite 5 中能够正常工作，但在升级到 Vite 6 后却出现了问题。Vite 团队指出，这实际上是 Vite 5 中的一个 bug 被修复的结果。在 Vite 5 中，这种路径解析方式会错误地匹配嵌套文件，可能导致意外地引入过多文件。

Vite 6 对此进行了修正，现在需要开发者采用更明确的路径构建方式。以下是两种推荐的解决方案：

1. 分割路径变量：

const pathParts = 'login/eraser.png'.split('/');
const imgUrl = new URL(`/src/assets/imgs/${pathParts[0]}/${pathParts[1]}`, import.meta.url).href;

2. 使用 import.meta.glob 进行资源导入，这是 Vite 提供的更现代的静态资源处理方式。

值得注意的是，这个变化还影响了构建后的资源文件名匹配。在 Vite 5 中，getImg 返回的结果会与 assetFileNames 配置处理后的文件名匹配，但在 Vite 6 中这种对应关系被打破了。特别是当开发者配置了自定义的 assetFileNames 规则时，可能会导致静态资源加载失败。

对于需要保持向后兼容的项目，开发者需要仔细检查所有使用 new URL() 进行动态资源引用的地方，并按照新的规范进行重构。同时，建议在升级到 Vite 6 时，对静态资源加载进行充分测试，确保所有资源都能正确解析和加载。

这个变化体现了 Vite 团队对构建过程精确控制的重视，虽然短期内可能需要开发者进行一些适配工作，但从长远来看，这有助于构建更可靠、更可预测的前端应用。