VSCode显示.vue导入时“无法找到模块” TS错误，编译时未

Question

简而言之，vscode在模块中显示此错误：

找不到模块'@ / components / SidebarToggleIcon'

但是在编译期间不会出现此类错误。

这是一个VueJS项目，并且SidebarToggleIcon是.vue此<script lang="ts">部分中带有TypeScript 的文件。之前在VSCode中以及在编译期间都出现了此错误，直到我添加了@vue/eslint-config-typescript软件包。现在只是显示在VSCode中。

侧边栏

<script lang="ts">
// [skip other imports]
import SidebarToggleIcon from '@/components/SidebarToggleIcon';

@Component
export default class LayoutSidebar extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }
}

</script>

SidebarToggleIcon.vue

<script lang="ts">
import Vue from 'vue';
import { getModule } from 'vuex-module-decorators';
import Component from "vue-class-component";
import PreferencesStore from '@/store/PreferencesStore';

const preferenceModule: PreferencesStore = getModule(PreferencesStore);

@Component
export default class SidebarToggleIcon extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }

    toggle(){
        preferenceModule.ToggleSidebar();
    }
}
</script>

为什么是这样？我该如何解决？

编辑：这不是@别名的问题，那些别名可以正确解决（在屏幕快照中，错误上方的行使用它，而我在项目中使用else-wear），使用相对路径时仍会显示此错误。我的TSConfig有适当的"paths": { "@/*": ["src/*"] }项目。如果这是问题所在，编译也将引发此错误，但不会，仅在VSCode中存在。

Answer 1

对我来说，对于 PhpStorm 中的 Vite & Vue 3 项目，在目录中创建一个 shims 文件就足够了src。我的大多数组件仅使用脚本设置。

src/shims-vue.d.ts

declare module '*.vue';

Answer 2

我已经安装了TypeScript Vue 插件 (Volar) VS Code 扩展，问题已解决。

\n

请记住禁用此 VS Code 内置扩展：TypeScript 和 JavaScript 语言功能。您可以在这里阅读更多内容阅读更多内容。

\n

\n
1. 在项目工作区中，使用Ctrl+ Shift+打开命令面板P（对于 macOS：\xe2\x8c\x98++ShiftP）。
\n
2. 键入built 并选择“扩展：显示内置扩展”。\n在扩展搜索框中键入 typescript（不要删除@builtin前缀）。
\n

\n

\n

\n
3. 单击“TypeScript 和 JavaScript 语言功能”的小齿轮图标，然后选择“禁用（工作区）”。
\n
4. 重新加载工作区。当您打开 Vue 或 TS 文件时，将启用接管模式。
\n
5. （选修的）如果您为 webpack 或 vite（或其他模块捆绑器）设置了自定义路径别名，请记住添加路径别名以支持 typescript
\n

\n

tsconfig.json

\n

{\n  "compilerOptions": {\n    /* other configs */\n    "paths": {\n      "@/*": [\n        "./src/*" // set path `@/*` as alias of `src/*`\n      ]\n    },\n    /* other configs */\n  }\n}\n

\n

Answer 3

在 Sidebar.vue 文件中，尝试在 import 声明中添加“.vue”扩展名，如下所示：

import SidebarToggleIcon from '@/components/SidebarToggleIcon.vue';

Answer 4

有点晚了，但请确保在 VSCode 中使用工作区版本的 TS，以便加载本地 TS 插件。参考此评论：https://github.com/vitejs/vite/issues/965#issuecomment-717248892

使用 VSCode，您可以选择工作区 TS 版本：

Answer 5

在我的机器上，VS Code 扩展Vetur在我的多项目存储库@/中的<script lang="ts">Vue 组件中为我的导入生成错误消息。

似乎 Vetur 在 VS Code 工作区顶级文件夹中查找tsconfig.json. 我的 Vue 应用程序及其tsconfig.json位于子文件夹中。Vetur 在调用 TypeScript 编译器时不会传递正确的设置。

解决方案1（临时黑客）

从 Vue 项目的根文件夹中启动 VS Code。（与正确的文件夹相同tsconfig.json。）

code .

确保除了属性之外还tsconfig.json包含属性（Vetur 常见问题解答）。compilerOptions.baseUrlcompilerOptions.paths

这会更改我的 VS Code 设置和扩展设置；因为项目级.vscode文件夹不再可访问。（我使用符号链接来保持工作区级和 Vue 级.vscode文件夹同步。）

解决方案2（黑客）

我的工作区中有一个 Vue 项目，因此我将修改后的tsconfig.json文件添加到我的整个工作区文件夹（我的 Vue 应用程序文件夹的父文件夹）。

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

"baseUrl"除了房产之外，我还需要"paths"房产（再次是Vetur 常见问题解答）。

我重新加载了 VS Code 以使更改生效。

该"exclude"属性可能不是必需的，但我对 Vetur 调用 TypeScript 编译器在node_modules文件夹上浪费时间感到偏执。

背景

这可能与（当前）开放的 Vetur 问题Multi root support #424 有关。（总结：Vetur 期望在 VS Code 工作区顶级文件夹中有一个SPA。）

Answer 6

在.vue导入中添加扩展后，我通过为 vue 文件添加打字稿垫片解决了这个错误。

我创建了一个typings/sfc.d.ts包含此文件的文件：

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

参考资料：https : //github.com/vuejs/vue/issues/5298#issuecomment-453036640

Answer 7

这是因为TypeScript不会自动解析Webpack别名。

为了让TS解析别名，应在tsconfig.json以下位置添加它们compilerOptions.paths：

{  
  "compilerOptions": {
   "paths": {
     "@/*": [
      "./*"
     ]
    }
  }
}

Answer 8

defineComponent如果您在 Vue3 中的文件中使用，*.vue您可以添加一个垫片，typings/sfc.d.ts例如

declare module '*.vue' {
    import {defineComponent} from 'vue';
    export default defineComponent;
}