vue-cli-service build未报VSCode识别的.ts文件TS错误排查方法

问题场景 #

• 运行环境为Vue 3 CLI 5项目
• 团队成员执行vue build时表现不一致：部分成员遇到.ts文件的TypeScript编译错误会正常触发构建失败，报错内容与VSCode提示完全一致；另一部分成员遇到相同TS错误时构建异常成功，仅本地IDE可正常识别对应TS错误
• 异常仅出现在.ts文件上，.vue文件校验逻辑正常，可排除Vetur、Volar等IDE插件影响
• 已确认统一前置条件：所有团队成员Vue CLI、Node版本完全一致，已尝试删除node_modules后重新执行yarn install，且typescript为项目本地依赖
• 核心排查方向：确认Vue构建流程、VSCode分别使用的tsc版本，定位TS错误不阻断构建的根因

查看Vue CLI构建流程实际使用的tsc版本 #

Vue CLI 5生产构建时的TS类型校验由fork-ts-checker-webpack-plugin执行，可通过以下3种方式确认实际调用的TS版本：

• 执行带详细日志的构建命令：运行vue-cli-service build --verbose，在完整输出日志中搜索fork-ts-checker、typescript相关字段，会直接打印当前加载的TS版本与对应文件路径
• 校验本地依赖调用优先级：在项目根目录执行npx tsc -v，如果输出版本号与项目package.json中声明的typescript版本不一致，说明全局安装的TS包被优先调用，可执行npm root -g定位全局依赖目录，删除全局安装的typescript包即可恢复本地依赖优先
• 插件埋点确认：临时修改项目node_modules/fork-ts-checker-webpack-plugin的入口代码，在插件引入typescript的位置添加打印逻辑console.log('构建使用TS路径：', require.resolve('typescript'), '版本：', require('typescript').version)，执行构建后控制台输出的信息就是构建流程100%真实使用的TS实例信息

查看VSCode实际使用的tsc版本 #

• 快捷键打开命令面板：Windows/Linux按Ctrl+Shift+P，Mac按Cmd+Shift+P，输入TypeScript: Select TypeScript Version，弹窗中会直接显示当前工作区使用的TS版本，同时标注版本来源（VSCode内置版本/项目本地node_modules版本）
• 如需确认具体加载路径，选中当前使用的TS版本后，打开VSCode输出面板（Windows/Linux按Ctrl+Shift+U，Mac按Cmd+Shift+U），下拉选择TypeScript日志通道，日志开头会打印当前TS服务的完整加载路径与版本号

额外高频异常排查点 #

如果确认两边TS版本完全一致仍存在构建不阻断问题，可逐一核对以下配置：

• 检查项目根目录tsconfig.json配置，确认noEmitOnError未被误设为false，无其他跳过文件校验的异常include/exclude规则
• 检查vue.config.js中对fork-ts-checker插件的自定义配置，生产构建下async属性默认值为false，如果被手动设为true会将类型校验改为异步执行，不会阻断构建流程
• 检查成员本地是否存在.env.local等个人环境配置文件，是否配置了跳过TS校验的相关环境变量

内容的提问来源于stack exchange，提问作者Matt Bryson