生产环境配置 sourcemap 的核心目标是定位错误但不泄露源码，推荐使用 nosources-source-map；可隐藏式生成并私有托管 .map 文件，配合 nginx 或 cdn 拦截请求，严禁使用内联或 eval 类型。

生产环境配置 SourceMap 的核心目标是：能定位错误位置，但不泄露源码内容。关键不是“开或关”，而是选对类型、控制暴露方式。

用 nosources-source-map 替代 source-map

这是最常用也最稳妥的方案。它生成独立 .map 文件，包含完整行号映射和 sources 列表，但 sourcesContent 字段为空——浏览器能跳转到正确文件和行，却看不到原始代码内容。

• Webpack 配置示例：devtool: 'nosources-source-map'
• 打包后 .map 文件体积小，不带源码，适合直接部署到 CDN 或静态服务器
• 错误监控平台（如 Sentry）仍可上传该 map 文件做堆栈解析，前端用户无法读取源码

隐藏式生成 + 后端私有托管

如果需要完整源码调试能力（比如内部运维团队排查），应把 .map 文件与 JS 分离部署：JS 放 CDN，.map 文件存私有对象存储或后端服务，并限制访问权限。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• Vite 示例：sourcemap: 'hidden' —— 生成 .map 文件但不写 sourceMappingURL 注释
• Webpack 中配合 devtool: 'source-map'，再通过构建脚本将 .map 文件单独上传至鉴权接口
• 确保 JS 文件中不包含 //# sourceMappingURL=xxx.map，避免浏览器自动请求

确保服务端不响应 .map 请求

即使生成了 .map 文件，只要服务器拒绝返回，前端就无法加载。这是最后一道防线。

• Nginx 配置示例：location ~* \.map$ { deny all; }
• CDN 可设置规则拦截所有 *.map 请求并返回 404 或 403
• 检查浏览器开发者工具 Network 标签页，确认 .map 文件请求状态码为 404/403 而非 200

禁用内联与 eval 类型

绝对不要在生产环境使用 inline-source-map、eval-source-map 或任何含 eval 的选项——它们会把 Base64 编码的 map 内容直接嵌入 JS，等于把源码白送。

• 这类配置会让压缩后的 JS 体积增大 20%~50%，且无法被缓存
• 即使 JS 被混淆，Base64 解码后仍可还原出清晰源码和变量名
• CI/CD 流水线中建议加校验脚本，扫描产出 JS 是否含 sourceMappingURL 或 data URL

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！