因为以前一直是用的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文件时会报红。