Vue3+TS实战避坑指南

M ? A2026-04-13 9:34

哈喽各位前端小伙伴，今天给大家分享一下我在做 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 类型定义错误

typescript 复制代码

// 错误写法
const props = defineProps({
  list: Array
})

// 正确写法
interface ListItem {
  id: number
  name: string
}
const props = defineProps<{
  list: ListItem[]
}>()

3. 路由跳转类型丢失

使用 vue-router@4 时，给路由配置添加类型定义，避免跳转时传参报错。

4. ESLint 与 Prettier 冲突

安装 eslint-config-prettier 和 eslint-plugin-prettier，统一代码格式化规则。

四、打包优化小技巧

开启 vite 的 build.minify: 'terser'，压缩代码体积
路由懒加载，按模块分割代码
移除 console.log，生产环境关闭 devtools

五、总结

Vue3 + TS 虽然上手有一定成本，但熟练之后能大幅提升开发体验和项目质量。遇到问题不要慌，多看文档多踩坑，慢慢就熟练了。

大家在开发中还遇到过哪些奇葩问题？欢迎在评论区交流讨论，一起进步！