Vue打包后dist文件夹中出现一些map文件的解决方法和导致Vue源码泄露问题

 1.map文件的作用：

在项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
但有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

解决方法：

进入项目打开vue.config.js中添加：productionSourceMap

重新打生产包:npm run build就已经没有各种.map文件。

const path = require('path')
...
module.exports = {
  publicPath: './',
  ...
  productionSourceMap: false,
  ...
}

2.map文件导致Vue源码泄露问题：

Vue使用webpack(静态资源打包器)的时候，如果未进行正确配置，会产生一个js.map文件，而这个js.map可以通过工具来反编译还原Vue源代码，产生代码泄露。

如何利用漏洞获取源码：

1.安装reverse-sourcemap：npm install --global reverse-sourcemap
2.查看是否安装成功：reverse-sourcemap -h

3.运行命名反编译js.map文件:  reverse-sourcemap --output-dir . index.11tbd41ca6d0a748a0s8.js.map

参数解释： --output-dir . 结果输出到当前目录的webpack文件夹

4.运行上面命令就会获取到vue源码

建议删除或禁止访问正式环境中的js.map文件；