为什么 vscode 突然开始显示所有导入 .vue 文件的错误？

Question

上周我的 vue 路由器配置运行良好。今天，router.ts 文件充满了错误。

具体来说，似乎在打字稿文件中，任何 vue 文件的导入都会给出错误 Cannot find module '../views/HomeView.vue' or its corresponding type declarations.

这发生在我的 所有 vue 项目中。如果我重新安装干净的 vscode 并使用 npm init 创建一个新的 vue3 项目，也会发生这种情况。

编辑：

• 它看起来像vue.vscode-typescript-vue-plugin 0.38.4 中的一个错误。降级到 0.38.3 会使错误消失。

重现步骤

从干净的 vscode 安装：

npm init vue@latest

√ Project name: ... vue-project
√ Add TypeScript? ... Yes
√ Add JSX Support? ... No
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ... Yes
√ Add Cypress for End-to-End testing? ... No
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes

cd vue-project
npm i
code .

>> "trust authors"
>> "install recommended plugins"

然后在 vscode 中打开任何 ts 文件。 （例如./src/router/index.ts）

版本：

• npm 8.12.1
• vue 3.2.37
• vscode 1.69.0
• vue.vscode-typescript-vue-plugin 0.38.4
• vue.volar 0.38.4
• vite 2.9.12

问题

在我看来，问题出在 vscode、tsc、volar 和 vite 的交集处。有没有人能更好地了解这里的故障组件是什么，以及是哪个更新导致的 - 因为我假设其中一个已更新并造成了问题。

Answer 1

修改tsconfig.json为你的Vue的父文件夹

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["YourVue/src/*"]
    }
  },
  "exclude": ["node_modules"]

或者你可以轻松做到：

declare module '*.vue';