懒加载时报错 Could not find a declaration file for module ... implicitly has an ‘any‘ type.ts(7016)

懒加载时，报错

报错详情

import { createRouter, createWebHistory } from 'vue-router'

// 路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'), // 按需加载
  },
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 模式的路由
  routes,
})

export default router

Could not find a declaration file for module '@/views/Home.vue'. 'v:/Web/Github_commit/aPlumAdmin/src/views/Home.vue' implicitly has an 'any' type.ts(7016)

不生效的解决方法1

AI

① 在项目的 src 或 types 目录下创建一个类型声明文件src/shims-vue.d.ts

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

这个声明告诉 TypeScript，所有以 .vue 结尾的文件都是 Vue 组件，并且它们默认导出一个 DefineComponent。
② 确保 tsconfig.app.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

③ 确保安装相关依赖 pnpm add -D vue @types/node typescript

不生效的解决方法2

参考文章 https://juejin.cn/post/7239554061279625272

① src/shims-vue.d.ts内容改成 和文章中一样的
② 同时 <script setup lang="ts"> </script>

生效的方法

参考文章 《Vue报错：implicitly has an ‘any‘ type解决方法》

与文章略有区别，新版本的vite创建项目的时候，tsconfig文件拆成了三个，要在tsconfig.app.json里面加一行。