文章目录
-
- bug描述
- [心酸过程：我的第一反应：Node 版本不对？](#心酸过程：我的第一反应：Node 版本不对？)
- 转机：换个关键词搜索
- 解决方案：锁定版本号！
-
- [步骤 1：删除 `^`，固定版本](#步骤 1：删除
^，固定版本) - [步骤 2：彻底清理重装](#步骤 2：彻底清理重装)
- [步骤 3：重新启动](#步骤 3：重新启动)
- [步骤 1：删除 `^`，固定版本](#步骤 1：删除
- [血泪教训 & 经验总结](#血泪教训 & 经验总结)
-
- [不要盲目换 Node 版本！](#不要盲目换 Node 版本！)
- 老项目务必锁定依赖版本！
- 遇到报错，先搜完整错误关键词！
- [.mjs 报错 = 现代 JS 语法 + 旧构建工具不兼容](#.mjs 报错 = 现代 JS 语法 + 旧构建工具不兼容)
- [维护老项目时，最好保留一份 package-lock.json！](#维护老项目时，最好保留一份 package-lock.json！)
- 写在最后
bug描述
今天接到一个"简单"任务：给一个以前的老 Vue 项目改个小功能。
我信心满满地拉下代码，执行：
bash
npm install
npm run serve结果------直接报错！😓
错误信息赫然写着：
js
./node_modules/vue-router/dist/vue-router.mjs心酸过程：我的第一反应：Node 版本不对？
我问同事，他们也说："我们都能跑，应该是你 Node 版本问题。"
于是......我开始了疯狂的版本切换之旅：
从 v16.17.1 → v18.20.8 → v20.19.4
安了删，删了安，重启终端、清缓存、重装依赖......
整整折腾了 3 个小时！
但------还是报同样的错！
我快崩溃了 😭
转机：换个关键词搜索
实在不行，我冷静下来，复制报错中的关键路径：
@ ./node_modules/vue-router/dist/vue-router.mjs
粘贴到百度，终于！找到了几篇真实踩过坑的人写的记录。
其中一条点醒了我：
安装vue-router时没有指定版本,然后npm自动下的是最新版（vue-router版本太高和vue2起冲突了）
🔥 真相大白：版本自动升级惹的祸！
打开 package.json，一看：
json
"dependencies": {
"vue-router": "^4.0.14",
}问题就出在这个 ^ 上！
^4.0.14表示：安装 4.x 的最新版。
解决方案：锁定版本号！
步骤 1：删除 ^，固定版本
json
"dependencies": {
"vue-router": "4.0.14",
}步骤 2：彻底清理重装
删除node_modules和package-lock.json
步骤 3：重新启动
bash
npm run serve成功运行！世界清净了！
血泪教训 & 经验总结
不要盲目换 Node 版本！
很多报错和 Node 无关，而是依赖版本冲突。
老项目务必锁定依赖版本！
删除 ^ 和 ~，使用精确版本号，避免自动升级引入不兼容包。
遇到报错，先搜完整错误关键词！
AI 回答可能泛泛而谈，但真实开发者踩过的坑记录往往一针见血。
.mjs 报错 = 现代 JS 语法 + 旧构建工具不兼容
尤其在 Vue 2 项目中，看到 vue-router.mjs 基本就是版本装错了。
维护老项目时，最好保留一份 package-lock.json！
它能确保每次安装的依赖完全一致。
写在最后
这次经历让我深刻体会到：技术问题不怕难，怕的是方向错了还死磕。
下次再遇到奇怪报错，我会先问自己：
"是不是依赖版本不对？是不是新旧框架混用了？"
希望这篇记录能帮到同样被 .mjs 折磨的你！
少走弯路，多喝热水，代码无 bug！ 💻✨
✍️ 作者： 一个被老项目虐哭又复活的前端
📅 日期： 2025年12月 17日
🔗 欢迎转发，禁止搬运