Vue 3项目迁移Vite后构建报鼠标事件TS错误，开发环境正常求助

可能的原因及对应解决方法 #

1. TypeScript配置缺少DOM类型库 #

如果tsconfig.json的compilerOptions.lib未包含"dom"，TS无法识别MouseEvent这类DOM相关类型，会触发类型不匹配错误。

修改tsconfig.json：

{
  "compilerOptions": {
    // ...其他配置项
    "lib": ["ESNext", "DOM", "DOM.Iterable"]
  }
}

2. Vue类型声明未正确引入 #

确保项目正确引入Vue的类型依赖，同时在tsconfig.json中配置Vue类型：

{
  "compilerOptions": {
    // ...其他配置项
    "types": ["vue"]
  }
}

另外检查package.json中Vue与Vite的版本是否兼容（推荐Vue3.2+搭配Vite3+），避免因依赖版本不匹配导致类型异常。

3. 严格类型检查引发的误判 #

若开启了strictFunctionTypes等严格类型选项，可能对Vue事件处理函数的兼容类型产生误判。可以尝试调整配置：

{
  "compilerOptions": {
    // ...其他配置项
    "strictFunctionTypes": false
  }
}

更推荐的方式是保持严格模式，给处理函数添加可选的事件参数明确类型，既符合TS要求又不影响原有逻辑：

const addToFilter = (e?: MouseEvent) => {
  console.log('do something');
};

4. 构建时启用了vue-tsc严格类型检查 #

如果package.json的构建命令包含vue-tsc类型检查（比如"build": "vue-tsc && vite build"），它的检查严格度远高于开发时的热更新检查，按照前面的方法修复类型问题即可。

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