Vue3+Electron项目中vue-router模块及类型声明找不到的解决办法

问题场景 #

使用Vite+TypeScript5.0.2+Vue3.2.47+Electron的项目中，执行import { createRouter, createWebHistory } from 'vue-router';时，出现错误提示：Vue: Cannot find module vue-router or its corresponding type declarations。

排查与解决步骤 #

1. 修复tsconfig.json的paths配置错误

你的tsconfig.json中paths配置放在了根节点，不符合TypeScript配置规范，必须将其移入compilerOptions内部：
修改后的tsconfig.json关键部分：

{
  "compilerOptions": {
    // 其他原有配置...
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "electron"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

2. 重新安装依赖，确保依赖完整性

依赖缓存或安装不完整可能导致模块识别失败，执行以下命令：

# 删除现有依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

3. 重启TypeScript语言服务

如果是编辑器类型检测缓存问题，重启TS服务即可：

• 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）
• 输入并选择TypeScript: Restart TS Server

4. 配置Vite路径别名（可选但推荐）

确保Vite的resolve配置与tsconfig的paths对应，在vite.config.ts中添加：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  // 其他Electron相关配置...
})

验证 #

完成以上步骤后重新导入vue-router，错误应该会消失。如果仍有问题，可以确认package.json中vue-router@4.2.4与Vue3的兼容性（当前版本是兼容的），或者检查代码文件是否在include配置的范围内。

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