Webpack+Vue+TS构建报错TS2307：无法找到App.vue模块及类型声明

核心排查与修复步骤 #

1. 确认类型声明文件配置 #

确保shims-vue.d.ts放置在项目根目录或TypeScript可识别路径下，内容必须包含：

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

同时检查tsconfig.json的include字段是否覆盖该文件：

"include": [
  "src/**/*.ts",
  "src/**/*.d.ts",
  "src/**/*.vue"
]

2. 修正Webpack中Vue与TS loader配置 #

确保已安装对应依赖（Vue3用@vue/compiler-sfc，Vue2用vue-template-compiler），并在webpack.config.js中配置：

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

关键：ts-loader的appendTsSuffixTo选项必须配置，让TS能处理Vue单文件组件的脚本部分

3. 调整TypeScript核心配置 #

确保tsconfig.json中以下选项正确：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["vue"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

moduleResolution设为Node确保模块解析符合Node.js规则；types包含vue让TS识别Vue类型定义

4. 补全依赖安装 #

执行对应命令确保所有必要依赖安装完整：

# Vue3项目
npm install vue vue-loader @vue/compiler-sfc ts-loader typescript webpack webpack-cli webpack-dev-server --save-dev

# Vue2项目
npm install vue vue-loader vue-template-compiler ts-loader typescript webpack webpack-cli webpack-dev-server --save-dev

5. IDE插件的收尾检查 #

• 关闭并重新打开项目，确保TypeScript Vue Plugin的接管模式真正生效
• 通过快捷键调出命令面板（Windows：Ctrl+Shift+P；Mac：Cmd+Shift+P），执行TypeScript: Select TypeScript Version，选择项目本地的TS版本

验证修复 #

完成配置后执行开发构建命令：

npx webpack serve --mode development

若仍报错，删除node_modules和package-lock.json（或yarn.lock），重新安装依赖后重试。

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