首先，这个TS1192: Module 'Application.vue' has no default export错误本质是TypeScript无法识别.vue文件的模块类型，再加上一些依赖冲突和配置缺失导致的，下面一步步帮你解决：

问题根源分析 #

1. 缺少.vue文件的类型声明：TypeScript本身不知道.vue文件的模块结构，需要我们手动提供类型定义，否则它会把.vue模块当成没有任何导出的空模块。
2. 依赖版本冲突：你安装了Vue2专属的vue-template-compiler，但当前使用的是Vue3，这个依赖会和Vue3的@vue/compiler-sfc产生冲突，导致Vue组件编译异常，进一步让TypeScript无法识别组件的导出内容。
3. tsconfig配置不完善：缺少一些必要的编译选项，影响TypeScript对Vue模块的解析和处理。

解决方案 #

1. 移除冲突依赖 #

Vue3不需要vue-template-compiler（这是Vue2的编译工具），直接卸载它：

npm uninstall vue-template-compiler

2. 添加.vue文件的类型声明 #

在项目根目录或者你的源码目录（比如assets目录下）创建一个名为vue-shims.d.ts的文件，内容如下：

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

这个文件会告诉TypeScript：所有.vue后缀的模块都默认导出一个Vue组件（DefineComponent类型），这样TS就不会再报“没有默认导出”的错误了。

3. 完善tsconfig.json配置 #

调整你的tsconfig.json，添加必要的编译选项并确保TypeScript能扫描到所有相关文件：

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "jsx": "preserve",
    "moduleResolution": "Node",
    "allowJs": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true
  },
  "include": [
    "assets/**/*",
    "*.d.ts"
  ]
}

• allowJs: 允许TypeScript处理JS文件，避免一些编译兼容问题
• esModuleInterop: 优化CommonJS和ES模块之间的导入兼容性
• include: 指定TypeScript需要处理的文件范围，确保我们的类型声明文件和源码都被扫描到

4. 确认webpack配置的正确性 #

你的webpack配置里已经添加了appendTsSuffixTo: [/\.vue$/]，这个选项是让ts-loader处理.vue文件中的TypeScript代码，这部分是正确的，不需要修改。

做完这些步骤后，重新运行npm run dev或者npm run prod，应该就能解决这个编译错误了。

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