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,

}

设置后编译器不会检查库文件中的类型定义是否正确，也不会对库文件的使用进行类型检查。

再次打包就非常顺利～