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

vue3.0找不到模块“./App.vue”或其相应的类型声明。

解决报错：类型“{}”上不存在属性“xxx”。ts(2339)

在vue3项目中想引用模块“@element-plus/icons-vue”，报错：找不到模块“@element-plus/icons-vue”或其相应的类型说明。

不能将命名空间“XXX”用作类型。ts(2709)

类型“{ name: string; path: string; component: () => Promise; }”的参数不能赋给类型“never”的参数。ts(2345)

---

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

解决方法：

1、在src根目录下创建一个文件env.d.ts的文件

2、在文件上写上以下内容：

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
}

vue3.0找不到模块“./App.vue”或其相应的类型声明。

解决方法：

情况一、vue3.0+js

根目录新建jsconfig.json

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

｝

情况二、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"
  }
｝

解决报错：类型“{}”上不存在属性“xxx”。ts(2339)

解决方法：

1、检查回调事件名字是不是一致
2、script看看是不是没添加setup

<script lang="ts" setup>

await ruleFormRef.value?.validate(async(valid,fields)=>{
        if(valid){
            console.log("正在登录...")
        }else{
            console.log("校验不通过！")
            console.log(fields)
        }
    })

在vue3项目中想引用模块“@element-plus/icons-vue”，报错：找不到模块“@element-plus/icons-vue”或其相应的类型说明。

解决方法：

在src 文件夹下创建一个canvas-sign .d.ts 的文件

然后在创建的这个 .d.ts文件里写入：

declare module "element-plus";

不能将命名空间“XXX”用作类型。ts(2709)

1、删除import type { FormInstance } from 'element-plus'
2、把const ruleFormRef = ref<FormInstance>()改写为const ruleFormRef = ref('')
3、删掉下面代码中的 : FormInstance | undefined

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
 
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

模块“"c:/Users/lenovo/Desktop/graduation_project/manageWebsites/vuecode/src/components/HeaderCom.vue"”没有默认导出。ts(1192)

类型“{ name: string; path: string; component: () => Promise<any>; }”的参数不能赋给类型“never”的参数。ts(2345)

解决方法：

加个<any>就不会报错了

let data = <any>[]
if (list.length > 0) {
    for (let i = 0; i < list.length; i++) {
        data.push({ name: list[i].name, path: list[i].index, component: () => import(`${list[i].filePath}.vue`) })
    }
    routes[0].children=routes[0].children?.concat(data as []);
}