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

Posted 2023-02-22

【中文标题】VSCode 在编译时显示 .vue 导入的“找不到模块”TS 错误

【英文标题】：VSCode showing "cannot find module" TS error for .vue import while compiling doesn't

【发布时间】：2019-07-17 06:06:39

【问题描述】：

简单地说，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 中。

【问题讨论】：

您找到解决方案了吗？我也遇到了这个错误。

【参考方案1】：

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

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

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

【讨论】：

Webpack 别名正在正确解析，请参阅上面的行，它也有一个 @。这不是问题。我可以使用直接路径，这仍然会出现。

另一个选项是它不能正确解析*.vue 文件。您是否尝试向文件添加扩展名以查看它是否有效？例子。 @/components/SidebarToggleIcon.vue

我也试过了。我什至用 vuecli 创建了一个全新的 vue typescript 项目，但问题仍然存在，但仅限于 vscode。

SO，创建了一个新的干净项目，并在我的所有代码中手动编写，我现在可以在导入文件名的末尾使用.vue 进行导入。

这对我没有用。我还没有弄清楚该怎么做

【参考方案2】：

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

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

【讨论】：

这个答案对我有用。也许它与我有这个的 shims-vue.d.ts 有关：declare module '*.vue' import type DefineComponent from 'vue' const component: DefineComponent<, , any> export default component

【参考方案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。）

【参考方案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

【讨论】：

我将它添加到我的src/ 文件夹中（使用electron-webpack），这解决了问题。我只是不知道为什么它解决了这个问题......

【参考方案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

【参考方案6】：

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

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

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

【参考方案7】：

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

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