设置 build.sourcemap: 'hidden' 是生产环境兼顾安全与可调试性的标准做法:生成 .map 文件但不注入 sourceMappingURL 注释,需手动上传至 Sentry 等平台并严格匹配 URL 前缀、版本号及 JS 内容一致性。

设置 build.sourcemap: 'hidden' 是生产环境兼顾安全与可调试性的标准做法:它生成 .map 文件,但不向 JS 末尾写入 //# sourceMappingURL=xxx.map 注释,因此浏览器不会自动加载,源码不会被普通用户获取,同时保留了供错误监控平台服务端解析的原始映射能力。
关键动作:上传 .map 文件到错误监控平台
hidden 模式下,.map 文件不会被浏览器使用,必须由你主动上传至 Sentry、HyperDX 或 Bugsnag 等平台,由其后端完成堆栈还原。这不是“配置完就生效”,而是构建 + 上传 + 匹配三步闭环:
- 构建时确保
build.sourcemap: 'hidden'(Vite 默认不生成,必须显式开启) - 构建产物中会出现
dist/assets/index.xxx.js.map等独立文件,但对应 JS 中没有 sourceMappingURL 注释 - 用官方 CLI 工具上传,例如 Sentry:
sentry-cli releases files <version> upload-sourcemaps dist --url-prefix '~/assets/' - HyperDX 要求
--app-version与前端 SDK 上报的release字段**完全一致**(包括大小写、分隔符、补零等)
路径匹配必须严格对齐
上传时指定的 --url-prefix(或类似参数)必须和线上 JS 资源的真实 URL 路径前缀完全一致,否则平台无法将错误堆栈中的文件路径(如 /assets/index.a1b2c3.js)映射到你上传的 .map 文件:
- 如果线上 JS 地址是
https://cdn.example.com/static/js/app.789def.js,则--url-prefix应设为'~/static/js/'(~表示 CDN 根路径) - 检查 .map 文件内
sources字段是否为相对路径(如../src/views/Home.vue),避免出现http://localhost:3000/...这类开发环境路径 - Vite 构建若用了
server.host: true打包,会导致 .map 中 sources 含本地地址,务必禁用或通过插件重写
防止内容不一致导致映射失败
Source Map 的核心前提是:平台拿到的 JS 内容,必须与生成 .map 时所用的 JS 完全一致。任何中间环节的二次处理都可能破坏匹配:
- CDN 开启了自动 JS 压缩(如 Brotli/Gzip 二次压缩)、代码混淆或资源重写,会导致 JS 字节流变化,.map 失效
- Nginx 启用
gzip_static on但未同步提供.js.map.gz,平台拉取的是未压缩 JS,而 .map 对应的是压缩前内容 → 不匹配 - 构建产物被构建后脚本修改(如版本注入、环境变量替换),且未触发重新生成 .map,也会导致内容偏差
快速验证是否生效(无需等线上报错)
本地即可验证映射逻辑是否正确,不用依赖真实错误上报:
- 用 Node.js 加载
source-map库,读取生成的.map和对应 JS 文件 - 调用
consumer.originalPositionFor({ line: 123, column: 45 }),传入混淆后堆栈中的行列号 - 若返回正确的
{ source: 'src/App.vue', line: 42, column: 18 },说明 .map 有效且路径无误


















