Vue3解决“找不到模块@/components/xxx.vue或其相应的类型声明ts文件(2307)”

Vue3解决模块找不到声明文件问题

原创已于 2025-06-06 09:49:06 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-06-05 17:45:02 首次发布

问题

在这里插入图片描述

1：如果没有这个env.d.ts文件，就新建

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

在这里插入图片描述

2：如果有tsconfig.json文件，但是还是一样报错，就需要include读取文件env.d.ts文件

在这里插入图片描述

3：如果需要使用@简写访问src如下

3-1：如果没有这个tsconfig.json文件，就新建

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "strictFunctionTypes": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "types": [
      // "@intlify/unplugin-vue-i18n/types",
      "vite/client"
      // "element-plus/global",
      // "@types/qrcode",
      // "vite-plugin-svg-icons/client"
    ],
    "outDir": "target", // 请保留这个属性，防止tsconfig.json文件报错
    "typeRoots": ["./node_modules/@types/", "./types"]
  },
  "include": [
    "src",
    "types/**/*.d.ts",
    "src/types/auto-imports.d.ts",
    "src/types/auto-components.d.ts"
  ],
  "exclude": ["dist", "target", "node_modules"]
}

在这里插入图片描述