Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue-router.js?v=a0bf46e2' does not provide an export named 'default'

### 解决 Vue Router 模块导出错误问题 在使用 Vite 构建工具时，可能会遇到如下错误提示： `Uncaught SyntaxError: The requested module 'vue-router' does not provide an export named 'default'`。这通常是因为 Vue Router 的版本不兼容或者导入方式有误所致。以下是具体原因分析与解决方案。 #### 1. 正确识别 Vue Router 版本 Vue Router v4 已经移除了默认导出（`default export`），因此不能再像以前那样通过 `import VueRouter from 'vue-router'` 来引入模块[^1]。相反，应该采用具名导入的方式获取所需的函数和类。 ##### 错误示例： ```javascript import VueRouter from 'vue-router'; // ❌ 不再支持 default export ``` ##### 正确示例： ```javascript import { createRouter, createWebHashHistory } from 'vue-router'; // ✅ 使用具名导入 ``` 这种变化是为了更好地遵循 ES Module 规范，并减少潜在的混淆[^2]。 #### 2. 更新路由初始化逻辑 根据官方文档推荐，在 Vue Router v4 中应按照以下方式进行配置： ```javascript // 导入必要的方法 import { createRouter, createWebHashHistory } from 'vue-router'; import routes from './routes'; // 假设这是您的路由表文件 // 创建路由器实例 const router = createRouter({ history: createWebHashHistory(), // 使用 hash 模式的路由历史记录 routes, // 注册路由规则 }); export default router; ``` 上述代码片段展示了如何利用 `createRouter` 和 `createWebHashHistory` 函数构建一个功能完整的路由器对象[^3]。 #### 3. 确认依赖包版本一致性 有时即使调整了导入语句仍然会报错，可能是由于项目中同时安装了多个不同版本的 `vue-router` 所致。可以通过运行以下命令检查当前环境下的确切版本号： ```bash npm list vue-router ``` 如果发现存在冲突（例如既有 v3 又有 v4），则需要清理多余副本并锁定单一版本。执行以下步骤完成修复工作： ```bash # 卸载旧版或冗余版本 npm uninstall vue-router@3 # 明确指定所需的新版范围重新安装 npm install vue-router@next --save ``` 注意这里选择了带有标签 `@next` 的预发布分支以确保获得最新特性集[^4]。 #### 4. 验证 TypeScript 类型声明 对于那些正在实践静态类型检查的应用程序来说，还需要同步更新对应的 `.d.ts` 文件内容以便匹配新的 API 形式。假如您遇到了类似的编译期告警消息，则可以考虑升级全局范围内共享的基础库集合——即所谓的 DevDependencies 列表项之一：“@types/vue-router”。 --- ###