更新Vite、Vue及相关插件至最新版后，构建输出缺失资源URL

问题描述 #

我维护的一个使用vite-plugin-virtual-mpa和@vitejs/plugin-vue的多页面Vue项目，旧版依赖存在1个高严重性漏洞，于是打算将依赖更新到最新版本，但更新后构建出现异常——生成的HTML文件里缺失了资源文件的链接（正确情况下HTML会包含打包后的JS/CSS资源引用，现在完全没有）。

我已经搭建了最小可复现项目，里面包含新旧版本的package.json和package-lock.json，可以分别测试验证问题。

已尝试方案 #

• 逐个更新依赖包排查问题，但不管先更新哪个包，都会触发构建失败的问题；
• 仅使用旧版package.json执行npm install时，生成的package-lock.json有问题，导致node_modules异常，构建结果错误；只有同时使用旧版package.json和package-lock.json执行npm install才能正常构建，说明旧版的锁文件配置是正确的。

排查与修复建议 #

1. 检查vite-plugin-virtual-mpa的版本兼容性
   该插件的更新可能与Vite新版本存在适配问题。可以查看插件的官方仓库issue列表，确认是否有其他用户遇到类似的多页构建资源缺失问题，或是官方是否发布了适配Vite最新版本的修复版本。

2. 开启Vite构建调试日志
   新版本Vite可能调整了多页面应用的构建逻辑，比如资源注入钩子、HTML模板处理方式。执行以下命令查看构建细节：

   vite build --debug
   

   重点关注HTML资源注入环节的日志，定位资源引用未生成的具体原因。

3. 核对插件配置是否需要更新
   查看vite-plugin-virtual-mpa的最新文档，确认其配置项是否有变更，比如多页面入口定义、HTML模板指定逻辑等，是否需要调整配置以适配新版Vite。

4. 单独更新高危漏洞依赖
   既然逐个更新都会出问题，尝试只修复高危漏洞：先通过npm audit定位具体的高危包，单独更新该包，保留其他依赖的旧版本，验证是否能在解决漏洞的同时不影响构建。

5. 替换多页插件尝试
   如果vite-plugin-virtual-mpa长期未维护，可以考虑替换为Vite官方原生支持的多页面配置（通过build.rollupOptions.input定义入口），或是使用其他维护活跃的多页插件（如vite-plugin-mpa），验证是否能正常生成包含资源链接的HTML文件。

内容的提问来源于stack exchange，提问作者Shivam