vite vue组件声明，跳转不到原组件问题

Question

vscode vite+vue3+typescript项目
volar已弃用, 取而代之的是 Vue - official
在组件A.vue中引入 import PrintRecord from "@/components/print-ticket/PrintRecord.vue"; 鼠标右击，跳转到声明文件，而不是组件文件,这个怎么解决？（ src/vite-env.d.ts 中删除内容后，ctrl+鼠标左键就能正常跳转到组件文件，但会标红（找不到声明文件））
在 src/vite-env.d.ts 中配置了 vue的声明文件

/// <reference types="vite/client" />
declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

src/tsconfig.app.json

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "typeRoots": [
      "./node_modules/@types",
      "./src/types"
    ]
  },
  "include": ["src/**/*.ts","src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

vite.config.ts

import { fileURLToPath, URL } from "node:url"; // cnpm install @types/node --save-dev
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import topLevelAwait from "vite-plugin-top-level-await"; //引入顶级语法
import VueSetupExtent from "vite-plugin-vue-setup-extend";
import { resolve } from "node:path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtent(), //这里调用
    //@ts-ignore
    topLevelAwait({
      promiseExportName: "__tla",
      promiseImportName: (i: number) => `__tla_${i}`,
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      // "@": fileURLToPath(new URL("./src", import.meta.url)),
      "@": resolve(__dirname, "./src"), //解决路径问题
    },
  },
});

Answer 1

引自免费微信小程序：皆我百晓生

你的问题似乎是关于在 Vite 项目中使用 Vue 时，TypeScript 类型声明的处理问题。从你提供的配置和代码来看，你的项目配置应该是正确的。但在实际开发中，有时候由于某些原因，IDE 可能无法正确地解析或跟踪 Vue 组件的声明文件。以下是一些可能的解决方案：

解决方案一：确保文件路径和名称正确

确保你的 *.vue 文件和对应的声明文件路径和名称完全匹配，并且声明文件的扩展名是 .d.ts。此外，确保你在 tsconfig.app.json 中的 include 和 paths 配置正确指向了这些文件。

解决方案二：重启 VSCode 或清除缓存

有时候，VSCode 可能由于某些原因无法正确地解析路径或声明文件。尝试重启 VSCode 或者清除其缓存，看看问题是否得到解决。你也可以尝试禁用并重新启用 Vue 插件。

解决方案三：检查 VSCode 的 TypeScript 配置

确保你的 VSCode 的 TypeScript 配置正确。你可以在 VSCode 的设置中检查 typescript.paths 和 typescript.compilerOptions 是否正确指向你的项目配置。此外，确保你安装了必要的 TypeScript 和 Vue 相关插件。

解决方案四：检查 Vite 配置

检查你的 vite.config.ts 文件中的别名配置是否正确。你已经在配置中设置了 @ 别名指向 src 目录，确保这个设置是正确的。此外，检查其他的配置是否与你的项目结构匹配。

解决方案五：检查模块导入路径和命名冲突

确保你在项目中使用的模块导入路径没有命名冲突。比如，如果你的项目中已经有一个名为 PrintRecord 的模块或文件，那么在导入时可能会发生冲突。尝试更改你的组件名或使用不同的导入路径来解决这个问题。

补充建议：检查项目依赖和插件版本

确保你的项目依赖和插件都是最新的版本，并且它们之间是兼容的。有时候，项目依赖和插件之间的版本冲突也可能导致这种问题。你可以尝试更新你的依赖和插件到最新版本，看看问题是否得到解决。

总结：排查问题的一般步骤

在排查问题时，你可以按照以下步骤进行：

1. 检查文件路径和名称是否正确。
2. 重启 VSCode 或清除缓存。
3. 检查 VSCode 的 TypeScript 配置。
4. 检查 Vite 配置和别名设置是否正确。
5. 检查模块导入路径和命名是否冲突。
6. 更新项目依赖和插件到最新版本。

希望这些解决方案和建议能帮助你解决问题。如果问题仍然存在，请提供更多详细的错误信息或日志，以便更好地帮助你解决问题。