error 找不到模块“../views/Login.vue”或其相应的类型声明

import('../views/Login.vue'), 提示找不到模块或其相应的类型声明;

技术栈:ts+vue3+vite

创建一个 vite-env.d.ts文件

/// <reference types="vite/client" />

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


上面代码用于在 TypeScript 项目中为 .vue 文件提供类型支持

在 TypeScript 中,三斜线指令是一种特殊的注释,用于告诉编译器在编译时包含额外的类型定义文件。

/// <reference types="vite/client" /> 表明当前项目依赖于 vite/client 这个类型定义包。

  • 这是一个 TypeScript 三斜线指令(triple-slash directive)
  • 它告诉 TypeScript 编译器引入 Vite 客户端的类型声明
  • 这样就能获得 Vite 提供的内置类型支持,如导入静态资源(图片、CSS 等)时的类型提示

vite/client 是 Vite 框架提供的类型定义文件,它包含了 Vite 客户端相关的类型信息,比如环境变量类型、导入模块的类型等。通过引入这个类型定义,TypeScript 编译器就能正确识别和处理与 Vite 客户端相关的代码。

declare module 是在 TypeScript 中声明一个模块的语法

declare module '*.vue'

  • 这是 TypeScript 的模块声明语法,用于为没有类型定义的模块提供类型声明
  • 具体来说,它为所有 .vue 文件扩展名的模块声明了类型
  • 在 TypeScript 中,默认不认识 .vue 文件,所以需要这个声明

从 Vue 中导入 DefineComponent 类型

import type { DefineComponent } from 'vue'

  • 从 Vue 中导入 DefineComponent 类型
  • 使用 import type 表示只导入类型,不会在运行时引入实际代码

声明一个名为 component 的常量,类型为 DefineComponent

const component: DefineComponent<{}, {}, any>

  • 声明一个名为 component 的常量,类型为 DefineComponent
  • DefineComponent 是 Vue 组件的类型,有三个泛型参数:
    -- 第一个 {} 表示组件的 props 类型为空对象
    -- 第二个 {} 表示组件的 emits 类型为空对象
    -- 第三个 any 表示组件的插槽内容类型为 any(任意类型)

component 作为默认导出

export default component

  • 将 component 作为默认导出
  • 这样在导入 .vue 文件时,TypeScript 就知道默认导出的是一个 Vue 组件
    这段代码的主要作用是让 TypeScript 能够正确识别和处理 .vue 文件的导入,为 Vue 单文件组件提供类型支持。当你在代码中使用 import xxx from './xxx.vue' 时,TypeScript 编译器就会根据这个声明文件知道导入的是一个 Vue 组件,并提供相应的类型检查
相关推荐
RuoyiOffice1 天前
2026最推荐基于SpringBoot+Vue3的项目管理经营一体化:从商机、合同、任务与工时走到回款和利润
spring boot·项目管理·vue3·crm·合同管理·ruoyi office·项目经营
RuoyiOffice2 天前
SpringBoot+Vue3 节日主题换肤实战:一条参数换全站配色,节后自动还原
spring boot·vue3·spring boot 3·vben admin·ruoyi office·节日主题·换肤方案
右耳朵猫AI3 天前
Web前端周刊2026W38 | React 19.3 发布、StyleX 深潜、jsdom 30.1 提速
前端·javascript·react.js·typescript·node.js
溪语流沙3 天前
Django + Vue电商项目第001讲:开篇|注册登录加增删改查,那不是电商
redis·python·mysql·docker·typescript·django·vue
掰头战士4 天前
多重影分身!恨不得把一个agent掰成两个? 还真能干!
typescript·llm·agent
shmily麻瓜小菜鸡4 天前
TDD(测试驱动开发)详解
开发语言·javascript·typescript·node.js·ecmascript
RuoyiOffice4 天前
SpringBoot3+Vue3 流程抄送已读:打开详情消红点,待办与知会怎么分开
spring boot·vue3·flowable·spring boot 3·ruoyi office·流程抄送·已读回执
雾隐隐o5 天前
TypeScript 基础:数据类型、接口与类型推论
typescript
志尊宝5 天前
Vue3 零基础每日笔记(038):亲手封装 useDebounceFn 与 useThrottleFn——高频事件的流量阀
前端·javascript·vue·html·vue3
flash俊杰5 天前
Zod Schema 驱动的 IPC 契约:从入参校验到状态机一致性的三层防御
javascript·typescript