TypeScript 中 Vite 怎么配置内联 SourceMap 方便错误捕获-js教程-PHP中文网

typescript 项目中 vite 启用内联 sourcemap 需设 build.sourcemap 为 'inline' 并确保 tsconfig.json 中 "sourcemap": true，可实现错误堆栈映射回源文件，但会增大包体积且不可用于公开线上环境。

typescript 中 vite 怎么配置内联 sourcemap 方便错误捕获

在 TypeScript 项目中，Vite 默认不为生产构建生成内联 SourceMap（即把 .map 内容直接嵌入 JS 文件），因为这会增大包体积且暴露源码。但如果你在开发调试、本地预览或受控测试环境（比如内部 QA 环境）中需要快速定位错误，启用内联 SourceMap 是最直接的方式——浏览器无需额外请求 .map 文件，错误堆栈就能自动映射回 .tsx 或 .ts 源文件。

启用内联 SourceMap 的核心配置

Vite 中通过 build.sourcemap 选项控制 SourceMap 行为。要实现“内联”，需将其设为 'inline'，而非 true 或 'hidden'：

sourcemap: 'inline'：将完整的 SourceMap JSON 内容以 Base64 编码形式追加到 JS 文件末尾，用 //# sourceMappingURL=data:application/json;base64,... 注释标识
必须配合 TypeScript 的 "sourceMap": true（在 tsconfig.json 的 compilerOptions 中）
不需要额外配置 rollupOptions.output.sourcemapFile，内联模式下该字段被忽略

具体操作步骤

以 Vite + TypeScript 项目为例（如 Documenso 使用的 apps/remix 结构）：

php版微信js-sdk支付接口类

下载

修改 vite.config.ts 的 build 配置：

export default defineConfig({
  build: {
    sourcemap: 'inline', // 关键：启用内联
  },
})

确认 tsconfig.json 启用了源码映射：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true, // 可选：把源码也嵌入 .map 中，便于无网络时调试
    "inlineSourceMap": false // 注意：此项应为 false，Vite 管理 sourcemap，TS 不自行内联
  }
}

执行 npm run build，检查输出的 .js 文件末尾是否包含 data:application/json;base64,... 注释

验证是否生效

构建完成后，用 vite preview 启动本地服务，打开浏览器开发者工具 → Console 或 Sources 面板：

触发一个故意错误（例如在组件中写 undefined.map()）
查看报错堆栈：行号应显示为 src/components/Editor.tsx:27:12 这类原始路径，而非 assets/index.abc123.js:1:12345
在 Sources 面板中展开 webpack:// 或 file:// 节点，应能看到可读的 TypeScript 源文件（非压缩后代码）