vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)

2023-01-29 14:37:12

目录情况一、vue3.0+js情况二、vue3.0+ts//vue3报错提示找不到模块./XXX.vue或其相应的类型声明//报错原因:typescript只能理解.ts文件,无法理解...

目录
情况一、vue3.0+js
情况二、vue3.0+ts

// vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明

// 报错原因:typescript 只能理解 .ts 文件,无法理解 .vue文件

//报错原因:Javascript 只能理解 .js 文件,无法理解 .vue文件

情况一、vue3.0+js

vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)

根目录新建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

// 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找不到模块内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!