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

Posted 水香木鱼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决引入新建页面或者通过router引入时报错相关的知识,希望对你有一定的参考价值。

一、文章引导

ts无法识别引入的vue文件 遇到问题 配置*.ts 编辑vite-env.d.ts文件

二、博主简介

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


三、文章内容

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

提示找不到模块问题 👇

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

//vite-env.d.ts

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

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,神器你知道吗?


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

以上是关于前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决引入新建页面或者通过router引入时报错的主要内容,如果未能解决你的问题,请参考以下文章

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

vue3+vite+ts 搭建项目

Webpack 和 TypeScript 无法解析 Vue 的声明文件

vue+ts中引入组件自动提示 declare module

VSCode 中,TS 提示 ”无法找到 *.vue 声明文件“ 的解决方案

vue3+vite+ts 配置别名@报错