vue3.0 cannot find module "./App.vue" or its corresponding type declaration.

// The vue3 error message cannot find the module "./XXX.vue" or its corresponding type declaration

// Reason for error: typescript can only understand .ts files, but not .vue files

//Reason for error: javascript can only understand .js files, but not .vue files

Case 1, vue3.0+js

 

Create a new jsconfig.json in the root directory

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

Solve the problem:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

Case 2, vue3.0+ts

Option One,

Create a new env.d.ts in the root directory

// 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
  }

Also solves the problem. Cons Needs to be on all the time

Solution 2: Create a new tsconfig.json  in the root directory

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