Vue中SourceMap的使用方法详解

目录

一、概述

二、使用方法

三、生成SourceMap

四、优化

五、结语

---

一、概述

Vue.js是一套构建用户界面的渐进式框架，通过HTML模板或者直接写render函数可以快速开发单页应用。在开发过程中，很多时候我们需要调试代码，追踪错误。Vue官方提供了SourceMap技术，可以帮助我们在错误提示信息中直接链接到源代码，从而更方便地进行调试。

在打包压缩后的JS代码里，有时很难找到错误发生的位置。SourceMap是一种映射关系文件，其中包含了压缩前和压缩后的代码的位置，这个文件可以帮助我们去定位代码的真实位置。

二、使用方法

在Vue CLI中默认是开启SourceMap的，只需要在webpack的配置文件中将其设置为true即可：

module.exports = {
    //...
    productionSourceMap: true
    //...
}

也可以通过vue.config.js文件中进行配置：

module.exports = {
    productionSourceMap: true
}

在代码打包后，压缩的JS文件会携带SourceMap文件一同发布到服务器。如果你需要禁用它&#