解决Vue 3.0找不到模块“./App.vue”或其类型声明的两种方案

作者:组件花园时间:2026-10-26 09:45:27浏览:173

本文针对Vue 3.0项目中出现的“找不到模块./App.vue或其相应的类型声明”错误,分析了TypeScript与JavaScript对.vue文件识别的差异。分别提供了针对Vue 3+JS项目配置jsconfig.json,以及Vue 3+TS项目通过env.d.ts声明或tsconfig.json配置的两种解决方案,帮助开发者快速修复构建报错。

本站推荐书籍,点击直接跳转京东官方商城购买

在Vue 3项目中,若构建工具提示找不到模块“./XXX.vue”或其相应的类型声明,通常是因为类型检查机制无法识别单文件组件。

对于使用TypeScript的项目,编译器默认仅处理.ts文件,无法直接解析.vue文件的类型信息。

对于使用JavaScript的项目,同样存在对.vue文件模块解析的配置缺失问题。

情况一、vue3.0+js

情况一、vue3.0+js

在项目的根目录下新建一个名为jsconfig.json的配置文件。

 {
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*":[
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modeules",
        "dist"
    ]
}

完成上述配置后,该报错即可解决。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
 
createApp(App).mount('#app')

情况二、vue3.0+ts

方案一、

在根目录下新建env.d.ts文件,并在其中添加对.vue文件的模块声明。

// vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明
// 报错原因:typescript 只能理解 .ts 文件,无法理解 .vue文件
declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>
    export default component
  }

此方法同样可以解决问题,但缺点是每次修改配置后可能需要重新打开编辑器或重启服务才能生效。

方案二、根目录新建tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}

到此这篇关于vue3.0找不到模块“./App.vue”或其相应的类型声明。的文章就介绍到这了,更多相关vue3.0找不到模块内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章
相关文章
更多