哈喽各位前端小伙伴今天给大家分享一下我在做 Vue3 TypeScript 项目时踩过的坑全是实战干货建议收藏一、为什么要选 Vue3 TS现在前端开发越来越卷Vue3 搭配 TypeScript 已经成为主流方案。TypeScript 能提供类型校验减少运行时错误让代码更易维护Vue3 的组合式 API 让逻辑复用更方便大型项目开发效率直接拉满。二、项目初始化常见问题Vue3 版本选择优先使用^3.3.0以上版本新特性更稳定对 TS 支持更友好。TS 配置报错tsconfig.json里一定要开启strict: true同时配置vueCompilerOptions避免模板类型校验失效。依赖冲突用pnpm替代 npm/yarn依赖安装更快还能有效解决幽灵依赖问题。三、开发中的高频坑点1. ref 和 reactive 混用混乱基础类型用ref引用类型用reactive解构 reactive 数据会丢失响应式要用toRefs处理2. defineProps 类型定义错误// 错误写法constpropsdefineProps({list:Array})// 正确写法interfaceListItem{id:numbername:string}constpropsdefineProps{list:ListItem[]}()3. 路由跳转类型丢失使用vue-router4时给路由配置添加类型定义避免跳转时传参报错。4. ESLint 与 Prettier 冲突安装eslint-config-prettier和eslint-plugin-prettier统一代码格式化规则。四、打包优化小技巧开启vite的build.minify: terser压缩代码体积路由懒加载按模块分割代码移除 console.log生产环境关闭 devtools五、总结Vue3 TS 虽然上手有一定成本但熟练之后能大幅提升开发体验和项目质量。遇到问题不要慌多看文档多踩坑慢慢就熟练了。大家在开发中还遇到过哪些奇葩问题欢迎在评论区交流讨论一起进步