前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】
前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】
·
一、文章引导
二、博主简介
🌏博客首页: 水香木鱼
📌专栏收录:后台管理系统
📑文章摘要:vue
typescript
vite
💌木鱼寄语:故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。
三、文章内容
①、编辑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,神器你知道吗?
本篇博客文章模板唯一版权归属©水香木鱼
更多推荐
已为社区贡献20条内容
所有评论(0)