Vue/TypeScript路由视图报错：无法找到模块或对应类型声明

问题根源分析 #

你的tsconfig.json路径别名配置错误，导致@指向项目根目录而非src目录，同时路由文件存在重复导入的语法错误。

具体修复步骤 #

1. 修正tsconfig.json的路径别名 #

修改compilerOptions里的paths配置，让@/*直接映射到src目录：

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

2. 修复路由文件的重复导入错误 #

删除重复的import语句，使用正确的别名路径：

// router/index.ts
import HomeView from '@/views/HomeView.vue'

const routes = {
  '/': HomeView,
}

3. 可选：重启TypeScript服务（VSCode环境） #

如果修改后错误仍未消失，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server重启服务，让新配置生效。

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