Vue Router 4 + TypeScript导入类型报错：缺失导出成员问题排查

问题重现 #

使用Vue 3 + TypeScript + Vue Router 4开发时，导入RouteLocationNormalized等类型时出现错误：

Module 'vue-router' has no exported member 'RouteLocationNormalized'.
Did you mean to use 'import RouteLocationNormalized from "vue-router"' instead?

已尝试重装依赖、验证TS版本兼容性、更新IDE，但问题未解决。

可行解决方案 #

1. 改用TypeScript类型专属导入

Vue Router 4的部分类型属于纯类型定义，在TS 4.5+版本中需要用type关键字明确导入，修改导入语句：

// 拆分工具函数和类型的导入
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import type { RouteLocationNormalized, NavigationGuardNext } from 'vue-router';

或统一对类型使用专属导入：

import type { RouteLocationNormalized, NavigationGuardNext, RouteRecordRaw } from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router';

2. 补充TS配置项

在tsconfig.json的compilerOptions中添加以下配置，修复模块解析和类型识别问题：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 保留原有其他配置
  }
}

3. 升级Vue Router至稳定版

当前使用的vue-router@4.0.13版本较早，部分类型定义存在兼容性问题，升级到最新稳定版：

npm update vue-router

4. 清理TypeScript缓存

编译器或IDE缓存可能导致类型识别异常：

• VS Code中执行命令TypeScript: Restart TS Server（快捷键Ctrl+Shift+P/Cmd+Shift+P）
• 删除项目根目录的.tsbuildinfo文件
• 重启IDE

5. 直接导入类型定义文件

若以上方法无效，可直接指定导入Vue Router的类型定义文件：

import type { RouteLocationNormalized, NavigationGuardNext } from 'vue-router/dist/vue-router.d.ts';

内容的提问来源于stack exchange，提问作者Monish Obaid