亳州市网站建设_网站建设公司_悬停效果_seo优化

bug描述

今天接到一个“简单”任务：给一个以前的老Vue项目改个小功能。

我信心满满地拉下代码，执行：

npminstallnpmrun serve

结果——直接报错！😓

错误信息赫然写着：

./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，一看：

"dependencies":{"vue-router":"^4.0.14",}

问题就出在这个^上！
^4.0.14表示：安装4.x的最新版。

解决方案：锁定版本号！

步骤 1：删除^，固定版本

"dependencies":{"vue-router":"4.0.14",}

步骤 2：彻底清理重装

删除node_modules和package-lock.json

步骤 3：重新启动

npmrun serve

成功运行！世界清净了！

血泪教训 & 经验总结

不要盲目换 Node 版本！

很多报错和 Node 无关，而是依赖版本冲突。

老项目务必锁定依赖版本！

删除 ^ 和 ~，使用精确版本号，避免自动升级引入不兼容包。

遇到报错，先搜完整错误关键词！

AI 回答可能泛泛而谈，但真实开发者踩过的坑记录往往一针见血。

.mjs 报错 = 现代 JS 语法 + 旧构建工具不兼容

尤其在 Vue 2 项目中，看到 vue-router.mjs 基本就是版本装错了。

维护老项目时，最好保留一份 package-lock.json！

它能确保每次安装的依赖完全一致。

写在最后

这次经历让我深刻体会到：技术问题不怕难，怕的是方向错了还死磕。

下次再遇到奇怪报错，我会先问自己：
“是不是依赖版本不对？是不是新旧框架混用了？”

希望这篇记录能帮到同样被 .mjs 折磨的你！
少走弯路，多喝热水，代码无 bug！ 💻✨

✍️ 作者： 一个被老项目虐哭又复活的前端
📅 日期： 2025年12月 17日
🔗 欢迎转发，禁止搬运