Vue TypeScript编译报错：无法找到'./app.vue'模块或类型声明

项目基于Vue+TypeScript+webpack搭建，已配置ts-loader，编译运行一切正常，但TypeScript持续抛出TS2307错误：

TS2307: Cannot find module './app.vue' or its corresponding type declarations

相关配置与代码 #

tsconfig.json配置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noImplicitAny": false,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./backend/app/*"]
    },
    "types": ["node"]
  },
  "include": ["backend/app/**/*.ts", "backend/app/**/*.vue"],
  "exclude": ["node_modules"]
}

代码导入与App.vue内容

在backend/app/main.ts中导入同目录下的Vue文件：

import app from './app.vue';

App.vue代码：

<template>
  <router-view/>
</template>

webpack中ts-loader配置

{
        test: /\.ts?$/u,
        loader: 'ts-loader',
        exclude: /node_modules/u,
        options: {
          appendTsSuffixTo: [/\.vue$/u],
        },
}

解决方法 #

• 添加Vue文件类型声明
  在backend/app目录下新建vue.d.ts文件，写入以下内容：

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

这个文件会被tsconfig.json的include规则自动识别，告诉TypeScript如何解析.vue模块。

• 补全webpack的Vue文件处理配置
  当前只配置了ts-loader，还需要添加vue-loader来处理.vue文件：
  首先安装依赖：

npm install vue-loader @vue/compiler-sfc --save-dev

然后在webpack配置中添加规则和插件：

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  // ...其他已有配置
  module: {
    rules: [
      // ...已有ts-loader规则
      {
        test: /\.vue$/u,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 需要添加这个插件才能让vue-loader正常工作
    new VueLoaderPlugin()
  ]
};

• 重启TypeScript语言服务
  如果配置修改后报错依然存在，在编辑器（比如VSCode）中按Ctrl+Shift+P，选择"TypeScript: Restart TS Server"，清除服务缓存后重新检查。

• 核对文件名大小写
  因为tsconfig.json中开启了forceConsistentCasingInFileNames: true，要确保导入语句中的文件名和实际文件的大小写完全一致，比如实际是App.vue就不能写成app.vue。

内容的提问来源于stack exchange，提问作者Spagheeti