记一次因 vue-router 升级而导致的 uniapp 故障

vue-router4.6.0 版本使用了 tsup 重构打包行为,使得 dist 文件夹缺少 vue-router/dist/vue-router.esm-bundler.js 文件,进而导致 uniapp 的 H5 打包失败

在云端复现故障

问题起因,在 github workflow 流水线打包的项目出现莫名其妙的故障,称找不到 vue-router.esm-bundler.js 文件。

如下图所示,缺少 vue-router/dist/vue-router.esm-bundler.js 导致的错误。

log 复制代码
[commonjs--resolver] Cannot find module '/home/runner/work/001-Smart-Community/001-Smart-Community/node_modules/vue-router/dist/vue-router.esm-bundler.js'

在本地复现故障

我的 uniapp 项目是基于 unibest 模板开发的,重新安装依赖后,在本地也能稳定复现出该故障:

log 复制代码
[plugin:vite:import-analysis] Cannot find module 'vue-router\dist\vue-router.esm-bundler.js'

可以确定是 @dcloudio/uni-h5@3.0.0-4070520250711001 依赖出现了问题,但是这个依赖我之前用了很久了,都没有问题,为什么就今天(2025-10-15)出问题了呢?

定位问题

明确依赖链

运行命令来查询依赖信息:

bash 复制代码
pnpm v @dcloudio/uni-h5@3.0.0-4070520250711001

首先我全局查询依赖 @dcloudio/uni-h5@3.0.0-4070520250711001 ,确定该依赖使用了 vue-router@4.3.0 ,并且锁定主版本,允许安装次级版本。

但是在我刚刚重新安装的依赖内,是安装了 vue-router@4.6.0 版本。做出猜测: 会不会是 vue-router@4.6.0 版本导致了故障呢?

确定依赖发布时间

继续运行命令查询依赖信息:

bash 复制代码
pnpm v vue-router

如下图所示,vue-router@4.6.0 版本是最近 20 小时发布的,所以就验证了为什么之前没出错,而今天却莫名其妙的出错了。所以可以锁定就是 vue-router@4.6.0 出现的故障。

阅读 vue-router@4.6.0 版本的更新日志

阅读此更新日志,得知 vue-router 在 4.6.0 版本做了重构,而且有可能会出现类型错误和文件未导出的问题。

仔细阅读本地安装的依赖,确实发现没有我所期望的文件:

所以破案了,是 vue-router@4.6.0 用了 tsup 做代码重构,所以导致构建产物名称变化,进而导致缺少文件的错误。

正式修复故障

预期会在 vue-router@4.6.1 内得到修复。

临时修复故障

如果很着急,需要实现版本回退,可以临时地用 pnpm.overrides 做依赖版本覆盖。在 package.json 内这样写:

json 复制代码
{
	"pnpm": {
		"overrides": {
			"vue-router": "4.5.1"
		}
	}
}

不过 vue-router@4.6.1 已经发版更新,所以该临时写法可以暂时不用了。

作为破坏性变更,准备向未来迁移

经过沟通得知,vue-router/dist/vue-router.esm-bundler.js 已经属于弃用的配置了,未来就不会提供了。参考资料如下:

已发布相关的报障 issue

相关推荐
郭老二5 小时前
【前端】vue3:编译步骤
前端
不在逃避q6 小时前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁6 小时前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One9856 小时前
高进度算法模板速记(待完善)
java·前端·算法
陈随易6 小时前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师7 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户059540174468 小时前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈8 小时前
Web前端入门第 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen9 小时前
面试官让我手写虚拟列表——AI生成的版本,快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒9 小时前
Vite热更新失效?你可能漏了这个配置
前端·人工智能·后端