VUE3开发遇到的“TypeScript error TS7016: Could not find a declaration file for module ‘./**.vue‘”问题

问题

一个vue3 ts项目，前端构建工具是vite，在执行npm run build命令时出现TS7016错误：

main.ts:5:18 - error TS7016: Could not find a declaration file for module './Demo.vue'

解决方法

翻阅了网上的一些资料，发现可以通过修改tsconfig.json来解决该问题。我项目里的tsconfig.json文件内容如下：

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

它引用了tsconfig.node.json和tsconfig.app.json。那么我们可以通过修改这两个文件的编译选项，解决该生成错误。本次开发中报错的是我自己写的一个Demo.vue模块，通过修改对比，我发现，可以通过在tsconfig.app.json中加入以下内容解决这个问题（tsconfig.node.json应跟引用的node_module相关，这个只是猜测，没有实践过，希望大家指正）：

"noImplicitAny": false,

我的tsconfig.app.json完整配置如下：

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "allowJS": true,
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "noImplicitAny": false,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

修改后重新执行npm run build，成功生成（事实上带错误的生成也可以正确运行）。

参考资料

Could not find a declaration file for module x · vitejs/vite · Discussion #14159 (github.com)

源代码链接

vue3typescriptgauge仪表盘效果示例资源-CSDN文库