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

Question

简单地说，vscode在模块中显示此错误：

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

但是在编译期间没有出现这样的错误。

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

边栏切换Icon.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

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

要TS解析别名，应将它们添加到tsconfig.json下的compilerOptions.paths中：

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

Answer 2

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

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

Answer 3

在导入上添加.vue扩展后，我通过为vue文件添加typescript填充程序解决了这个错误。

我在typings/sfc.d.ts中创建了一个包含以下内容的文件：

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

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