生产环境配置 SourceMap 的核心是“生成但不公开”，应使用 hidden-source-map：生成 .map 文件但不注入 sourceMappingURL 注释，配合 devtoolModuleFilenameTemplate 统一路径、TerserPlugin 剥离源码内容，并上传至 Sentry 等平台后端解析，确保错误堆栈可还原且源码不暴露。
生产环境配置 SourceMap 的核心目标不是让浏览器自动加载，而是让错误堆栈可还原、可解析、不暴露源码——关键在于“生成但不公开”，靠监控平台后端解析，而非前端加载。
选对 devtool：用 hidden-source-map 生成独立文件
Webpack 中设 devtool: 'hidden-source-map' 是生产环境最稳妥的选择。它会生成完整的 .js.map 文件，但不在 JS 文件末尾写入 //# sourceMappingURL=xxx.map 注释，因此浏览器不会自动请求，避免性能损耗和源码泄露风险。相比 source-map，构建略快；相比 cheap-module-source-map，保留了列级精度，能准确定位到具体变量或表达式。
- Vue CLI 项目可在
vue.config.js中这样配：
productionSourceMap: true,
configureWebpack: {
devtool: 'hidden-source-map'
}
};
- 若用 Vite，对应配置为
build.sourcemap: 'hidden'
确保 .map 文件路径正确且内容安全
生成只是第一步，还要让映射关系真正可用。在 output 中设置 devtoolModuleFilenameTemplate，统一源码路径格式，避免因别名、绝对路径导致 Sentry 解析失败：
- 用
TerserPlugin压缩时，开启excludeContent: true，剥离原始源码内容，只保留位置映射，减小 .map 体积并降低敏感信息泄露风险 - 禁止将 .map 文件放在 CDN 或静态资源根目录下；改用脚本上传至 Sentry / Bugsnag，并绑定
release版本号和 Git commit ID
配合错误监控平台做后端映射
线上错误不该靠人工开控制台，而应由 SDK 上报压缩堆栈，再由平台按需加载对应版本的 .map 文件进行反解。Sentry 中只需：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 构建时生成
dist/app.js.map并上传（通过sentry-cli releases files <version> upload-sourcemaps） - 前端 SDK 初始化时传入正确的
release字段 - 错误发生后，Sentry 自动把
app.min.js:23:456映射成src/views/Dashboard.vue:87:12
这种方式完全规避了浏览器加载 .map 的网络开销与 CSP 限制，也无需在 HTML 或 JS 中暴露任何路径。
验证是否真正生效
配置完必须实测，不能只看构建日志：
- 检查 dist 目录下是否生成了
.js.map文件，且与 JS 同名同级 - 打开 Chrome DevTools → Sources 面板 → 点击右上角 “⋯” → “Add source map”，手动加载本地 .map 文件，确认能否展开原始源码树
- 在 Sentry 中触发一个已知错误（如
throw new Error('test')），查看 issue 页面是否显示带源文件路径和行列号的堆栈
