ERROR in ./node_modules/vue-router/dist/vue-router.mjs 被报错折磨半天？真相竟是……

文章目录

- bug描述
- [心酸过程：我的第一反应：Node 版本不对？](#心酸过程：我的第一反应：Node 版本不对？)
- 转机：换个关键词搜索
- 解决方案：锁定版本号！
- - [步骤 1：删除 `^`，固定版本](#步骤 1：删除 ^，固定版本)
  - [步骤 2：彻底清理重装](#步骤 2：彻底清理重装)
  - [步骤 3：重新启动](#步骤 3：重新启动)
- [血泪教训 & 经验总结](#血泪教训 & 经验总结)
- - [不要盲目换 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日

🔗 欢迎转发，禁止搬运