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

Question

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

  

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

但是在编译过程中不会出现此类错误。

这是一个VueJS项目，SidebarToggleIcon是.vue部分中带有TypeScript的<script lang="ts">文件。在我添加@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>

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

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

Answer 1

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

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

解决方案1（临时破解）

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

code .

确保tsconfig.json除compilerOptions.baseUrl属性（Vetur FAQ）之外还包含compilerOptions.paths属性。

这将更改我的VS Code设置和扩展名设置；因为无法再访问项目级别的.vscode文件夹。 （我使用符号链接使工作空间级别和Vue级别的.vscode文件夹保持同步。）

解决方案2（破解）

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

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

除了"baseUrl"属性（同样是Vetur FAQ）之外，我还需要"paths"属性。

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

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

背景

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

Answer 2

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

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

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

Answer 3

在导入中添加.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 4

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

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