vite + typescript 项目中开发模式默认启用内联 sourcemap，无需额外配置即可在浏览器中调试原始 ts 文件；生产构建需手动设置 build.sourcemap 以生成外部或隐藏式 .map 文件，并确保 tsconfig.json 中 "sourcemap": true。
在 TypeScript 项目中使用 Vite 时，默认已开启 SourceMap 支持，但要真正实现高效调试，需确认配置正确、构建环境匹配，并配合浏览器和 IDE 正确使用。
确认开发模式下 SourceMap 已启用
Vite 在 开发模式（vite dev） 下默认生成并内联 source map（sourceMap: true），无需额外配置。浏览器开发者工具可直接映射到原始 TypeScript 文件，断点、单步、变量查看均正常工作。
- 确保没有在
vite.config.ts中显式关闭：build.sourcemap = false - 检查控制台是否出现
Source map error提示——常见于路径错误或服务器未正确提供 .map 文件 - 打开 Chrome DevTools → Sources 面板，展开
localhost:5173，应能看到.ts文件而非仅.js
生产构建时按需生成外部 SourceMap
生产环境（vite build）默认不生成 SourceMap，如需线上错误排查，应显式启用并选择安全方式：
- 在
vite.config.ts中设置：build: { sourcemap: true }→ 生成.js.map文件，与 JS 同目录 - 更推荐：
build: { sourcemap: 'hidden' }→ 生成 .map 文件但不通过sourceMappingURL注释暴露，避免被直接访问 - 若需上传至错误监控平台（如 Sentry），用
'inline'或true，再配合sentry-vite-plugin自动上传
TypeScript 类型不影响 SourceMap 生效
SourceMap 映射的是编译后的 JavaScript 和原始 TS 文件之间的位置关系，与类型检查无关。但以下情况会影响调试体验：
-
tsconfig.json中必须包含"sourceMap": true（Vite 会读取该配置，优先级高于自身设置） - 确保
"outDir"未意外覆盖源文件结构；Vite 不输出中间文件，因此推荐保持"outDir"为空或仅用于其他构建流程 - 避免在
tsconfig.json中启用"inlineSources": true（Vite 不依赖此选项，且可能增大包体积）
调试常见问题快速排查
如果断点不命中或显示为灰色，大概率是 SourceMap 加载失败：
- 浏览器 Network 标签页查看
.js.map是否返回 404 或 403 —— 检查 Vite 开发服务器是否托管了 map 文件（默认支持） - VS Code 中按
Ctrl+Shift+P→ “Debug: Open Link” 粘贴页面 URL，确保调试器能关联本地 TS 文件 - 禁用浏览器缓存（DevTools → Network → ✅ Disable cache），尤其在热更新后重新加载页面
- 检查是否有多个同名 TS 文件（如不同路径下重名），导致 SourceMap 定位错乱
