sourcemap简介
当我们的应用程序部署到生产环境时，我们发现它与我们在开发环境时的代码不同。我们的代码在构建过程中会以各种方式进行修改和优化。
TypeScript 被转译、压缩。生成的 JavaScript 包尽可能小并且能够在浏览器中正常运行。
所有这些步骤都很有效率，它们提高了我们应用程序在生产环境下的性能。但是当我们需要在生产环境下调试代码时它对我们产生了很大的障碍。
sourcemap配合Chrome 开发工具可以为我们提供一个debug线上项目的功能
sourcemap配置
vue-cli中的配置
productionSourceMap: false,.
sourcemap的使用
npm run build 后就可以发现 dist文件夹中已经存在.map文件了
这时候我们要手动将js 和 对应.map文件分隔开，不需要和js文件上传到生产环境上去，不然很容易就造成了代码泄露了
然后到生产报错的时候
- 打开混淆代码
- 右键 -> 选择【Add source map】
- 输入本地 sourceMap 的地址（此处需要启用一个静态资源服务，可以使用 http-server 或者通过浏览器打开对应混淆代码的.map文件 ），完成。本地代码执行构建命令，注意需要打开 sourceMap 配置，编译产生出构建后的代码，此时构建后的结果会包含 sourceMap 文件。
关联上 sourceMap 后，我们就可以看到 sources -> page 面板上的变化了
如果左侧出现了webpack://，则表示source map已经成功导入，可以调试对应的源码
