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

Question

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

找不到模块'@/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

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

TS解析别名需要在tsconfig.jsoncompilerOptions.paths下添加：

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

Answer 2

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

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

Answer 3

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

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

解决方案 1（临时破解）

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

code .

确保除了compilerOptions.paths 属性(Vetur FAQ) 之外，tsconfig.json 还包含compilerOptions.baseUrl 属性。

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

解决方案 2（破解）

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

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

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

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

"exclude" 属性可能不是必需的，但我很担心 Vetur 调用 TypeScript 编译器在node_modules 文件夹上浪费时间。

背景

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

Answer 4

在导入时添加 .vue 扩展后，我通过为 vue 文件添加 typescript shims 解决了这个错误。

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

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

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

Answer 5

如果 Vetur 扩展导致错误并且您正在使用 tsconfig 路径映射，那么对我有用的是在顶级文件夹中创建一个 vetur.config.js 文件，指定在哪里可以找到 tsconfig.json 文件，如下所示：

module.exports = {
  projects: [
    {
      root: "./yourprojectdirectory",
      tsconfig: "./tsconfig",
    },
  ],
};

看起来 Vetur 会尝试在您的根目录中查找 tsconfig.json，因此如果您的项目位于子文件夹中，它将无法自行找到它。

https://vuejs.github.io/vetur/guide/setup.html#advanced

Answer 6

如果您正在使用 typescript 并希望从 vuejs 项目的外部库中导入组件。这就是我解决问题的方法。

1. 在src/ 创建index.d.ts 文件
2. 添加此代码 -> declare module 'myAwesomeLib'
3. 导入组件 -> import {SomeMethod} from 'myAwesomeLib'

*.d.ts 文件用于提供关于用 JavaScript 编写的模块的 typescript 类型信息。

Answer 7

如果您在 Vue3 中的 *.vue 文件中使用 defineComponent，则它是

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