在 Vite 项目中，当代码里使用 new URL 来引用资源时，构建工具是怎样识别并处理这些资源的？

回答思路

1. 【回答框架 1】Vite 会在编译阶段对 new URL 表达式进行静态分析，识别其参数。如果第一个参数是相对路径或绝对路径（非外部 URL），且第二个参数是 import.meta.url，Vite 会将这个路径解析为实际资源路径，并在构建时将该资源作为静态资源处理，输出到构建产物的 assets 目录，同时修改代码中的 URL 为最终访问路径。
2. 【回答框架 2】对于其他形式的 new URL（如使用变量作为路径、或没有指定 import.meta.url），Vite 不会进行静态处理，而是保留原代码逻辑，由浏览器或运行时解析。资源不会被复制或重命名，开发时行为与普通浏览器一致。
3. 【回答框架 3】开发服务器下，Vite 通过插件将此类 URL 转换为 /@fs/ 或 /src/ 等内部路径，实现模块化加载；生产构建时则会使用相对或绝对 base 路径，并处理资源指纹。
4. 【回答框架 4】该机制本质是 Vite 对 ESM 中 new URL(..., import.meta.url) 模式的优化，与 Webpack 的 require.context 或 file-loader 不同，Vite 依赖原生 ESM 和静态分析，不能处理完全动态的路径。
5. 【回答框架 5】若需要动态资源，应通过 import.meta.glob 或显式列出可能路径，否则无法被构建管线识别，导致生产环境资源丢失或 404。
6. 【关键点 1】只有 new URL(相对路径或绝对路径, import.meta.url) 会被 Vite 静态识别并处理资源
7. 【关键点 2】非静态形式（变量路径、无 import.meta.url）不保证被构建处理
8. 【关键点 3】开发态通过内部路径加载，生产态输出到 assets 并重写 URL
9. 【关键点 4】动态资源需用 import.meta.glob 或手动列举，避免构建遗漏
10. 【易错点 1】误以为所有 new URL 都会被 Vite 处理，忽略了对参数静态性的要求
11. 【易错点 2】使用绝对外部 URL 或纯变量表达式时，仍被当作普通代码，资源不会打包
12. 【易错点 3】忽略 base 配置对最终资源路径的影响，可能导致部署后资源 404