前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】

您所在的位置:网站首页 添加组件找不到topwidgets 前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】

前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】

2023-08-17 01:47| 来源: 网络整理| 查看: 265

一、文章引导 ts无法识别引入的vue文件 遇到问题 配置*.ts 编辑vite-env.d.ts文件 二、博主简介

🌏博客首页: 水香木鱼 📌专栏收录:后台管理系统 📑文章摘要:vue  typescript vite 💌木鱼寄语:故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。

三、文章内容

在这里插入图片描述

①、编辑vite-env.d.ts 文件

在这里插入图片描述

提示找不到模块问题 👇

解决方案: 在src目录下, vite-env.d.ts文件内新增如下代码:

//vite-env.d.ts /// declare module "*.vue" { import { DefineComponent } from "vue"; // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types const component: DefineComponent}, any>; export default component; } // 环境变量 TypeScript的智能提示 interface ImportMetaEnv { VITE_APP_TITLE: string; VITE_APP_PORT: string; VITE_APP_BASE_API: string; } interface ImportMeta { readonly env: ImportMetaEnv; } ②、配置*.ts

在tsconfig.json 文件中include内 新增 “*.ts”

"include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "*.ts" ],

多级选目录时不报错配置 (可选配置),同样在include 内 配置

"src/**/*.ts", ③、遇到问题

在这里插入图片描述

注意:此时会出现一个问题,提示:无法在 "--isolatedModules" 下编译“d.ts”,因为它被视为全局脚本文件。请添加导入、导出或空的 "export {}" 语句来使它成为模块。

将 compilerOptions中isolatedModules 状态改为false

"isolatedModules": false,

即可解决 找不到模块 问题!

四、程序语录 为什么我们没有时间把事情做对,却总有时间把事情做过头? 五、精彩推荐

💡前端获取当前系统时间/日期(vue写法) 💡vue实现图片预览功能,提高你的开发效率 💡vue后台管理做适配的最佳方案,你知道吗 💡前端引入阿里图标库的最便捷方式 💡vue时间格式处理(YYYY-MM-DD HH:mm:ss)moment.js,神器你知道吗?

本篇博客文章模板唯一版权归属©水香木鱼



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3