vue+tsc+noEmit导致打包报TS类型错误问题及解决方法
当我们新建vue3项目,package.json文件会自动给我添加一些配置选项,这写选项基本没有问题,但是在实际操作过程中,当项目越来越复杂就会出现问题。本文列举一个目前我遇到的一个问题:打包后报了一堆TS类型错误,怎么消除这些错误?
项目环境:Vue3 + Vite + TS
当项目进行打包时候,突然发现终端有几十项报错
npm run build
详细报错信息如下:
截图图片如下:
打包执行的是npm run build
命令,那么具体执行了什么呢?我们查看package.json
中配置项。
"scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "preview": "vite preview" },
可以发现在build
时,执行了vue-tsc --noEmit && vite build
,其中
vue-tsc
:Vue 官方提供的命令,用于执行 TS 的类型检查。它在执行时会根据项目中的 tsconfig.json 文件配置进行类型检查--noEmit
:TS 编译器的选项,使用 --noEmit 选项后,编译器仅执行类型检查,而不会生成任何实际的编译输出
所以可以看出了,在打包的时候编译器执行了TS类型检查,所以才报了一堆错,类型错误最终不会影响项目的正常运行
解决
"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },
另外项目通常在编译时候,也会对我们引入的一些依赖包进行类型校验,我们并不需要这个操作,所以可以在tsconfig.json
中设置如下:
"compilerOptions":
{ "skipLibCheck": true, }
设置后编译器不会检查库文件中的类型定义是否正确,也不会对库文件的使用进行类型检查。
再次打包就非常顺利~