Vite、Vue 更新后构建输出缺失资源 URL？可能是这个包版本惹的祸！

# Vite、Vue、@vitejs/plugin-vue 和 vite-plugin-virtual-mpa 的更新问题：构建输出中缺少资源 URL

问题概述

在将 Vite、Vue、@vitejs/plugin-vue 和 vite-plugin-virtual-mpa 更新到最新版本后，我发现构建输出中缺少对生成资产文件的链接。这导致生成的 HTML 文件无法正确显示应用程序的资源，例如 CSS 和 JavaScript。

问题排查

起初，我怀疑是单个包导致了这个问题。但是，逐一更新包后，无论从哪个包开始更新，都会出现相同的错误。

进一步调查发现，即使我仅使用旧的 package.json 文件（不包括旧的 package-lock.json）运行 npm install，它也会生成一个错误的 package-lock.json 文件。反过来，这又会导致 node_modules 目录错误，并最终导致错误的构建。

解决方案

通过试验和失败，我发现问题的根源在于 @vitejs/plugin-vue 的更新版本。最新版本的 @vitejs/plugin-vue 引入了对 Vue 3 的支持，而我的项目仍然使用 Vue 2。

要解决此问题，我回退到 @vitejs/plugin-vue 的较早版本：

npm install --save-dev @vitejs/plugin-vue@2.3.3

回退后，npm run build 再次正常运行，并生成了正确的构建输出，其中包含对资产文件的链接。

总结

更新 Vite、Vue、@vitejs/plugin-vue 和 vite-plugin-virtual-mpa 到最新版本时，要注意与现有项目兼容性的潜在问题。在更新之前，建议创建项目的备份或在沙箱环境中进行测试。如果遇到构建问题，请逐一回退包版本，直到找到导致问题的包。

常见问题解答

Q1：为什么 package-lock.json 文件如此重要？

A1：package-lock.json 文件记录了项目的精确依赖关系树，包括版本和哈希。它确保每次运行 npm install 时安装的确切相同的包版本，从而提高构建的可重复性。

Q2：如何回退到旧版本的包？

A2：要回退到旧版本的包，请在 package.json 文件中的包名称后指定版本号。例如，要回退到 @vitejs/plugin-vue 的 2.3.3 版本，请使用以下命令：

npm install --save-dev @vitejs/plugin-vue@2.3.3

Q3：是否有其他可能导致构建失败的原因？

A3：除了包版本不兼容之外，其他可能导致构建失败的原因还包括：

• 配置错误
• 依赖关系冲突
• 环境变量问题

Q4：如何解决依赖关系冲突？

A4：要解决依赖关系冲突，请尝试以下步骤：

• 更新所有依赖关系的最新版本
• 检查 package.json 文件中的版本范围
• 尝试使用 npm dedupe 命令

Q5：如何提高构建可重复性？

A5：要提高构建可重复性，请确保：

• 使用版本控制
• 提交 package.json 和 package-lock.json 文件
• 使用持续集成工具
• 测试构建在不同的环境中