VSCode 在编译时显示 .vue 导入的“找不到模块”TS 错误

Question

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

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

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

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

侧边栏.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>

侧边栏切换图标.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 中。

原文由 Douglas Gaskell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Robson Oliveira 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

TS要解析别名，应在 tsconfig.json 下的 compilerOptions.paths 中添加：

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

原文由 aBiscuit 发布，翻译遵循 CC BY-SA 4.0 许可协议