vue3 + Typescript import “.vue“ 文件时报红问题

文章讲述了作者从JS转用TS时遇到的路由设置问题,主要是TS无法自动识别Vue文件的依赖。通过在env.d.ts中声明Vue模块解决了部分问题,但仍有报错。最终发现,在Vue组件中使用`setup`字段代替默认导出解决了导入问题。
摘要由CSDN通过智能技术生成

        因为以前一直是用的js来写脚本,突然换成ts之后有很多问题,今天在做路由设置导入组件的时候一直报红,看了很多相关文档都没有找到问题,最后发现其实是因为ts导出方式和js不太一样。

        在router/index.ts中设置路由:

import index from "@/layout/index.vue"

        查询文档后发现ts中没有自动识别vue文件的依赖,需要在env.d.ts中添加module:

declare module '*.vue' {
    import { DefineComponent } from "vue";
    // 有一些文档里import的是ComponentOptions,但是版本貌似比较低了
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

         在做完这一步之后依旧在报红,也运行不起来,各方查阅文档后依旧解决不了,干脆摆烂了!直接先写组件!

        在写完index.vue之后,想回去在解决这个问题,结果发现不报红了,经过一番折腾之后发现组件中的ts脚本是不需要默认导出的,在script标签中加上setup字段即可,这样也解决了导入vue文件的问题。以我猜测估计是因为组件中没有有效导出所以才导致路由导入vue文件时会报红。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值