typescript - VSCode 在编译时显示 .vue 导入的 "cannot find module"TS 错误

Question

简单地说，vscode 在一个模块中显示这个错误:

Cannot find module '@/components/SidebarToggleIcon'

但是在编译过程中没有出现这样的错误。

这是一个 VueJS 项目和 SidebarToggleIcon是 .vue在 <script lang="ts"> 中使用 TypeScript 文件部分。在我添加 @vue/eslint-config-typescript 之前，这个错误出现在 VSCode 中和编译期间。包裹。现在只是出现在 VSCode 中。

Sidebar.vue

<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 项目，在 src 目录中创建一个 shims 文件就足够了。我的大部分组件仅使用脚本设置。

src/shims-vue.d.ts

declare module '*.vue';