[Vue] vue-cli3 配置开发环境打包关闭sourceMap

接上文
[《[Chrome] Chrome Devtools - Sources 中的webpack-internal: //和 webpack:// 目录是怎么来的》](https://segmentfault.com/a/11...)

前景提要：

有个前端项目在测试环境被检测出源码泄露风险，这个项目是vue2写的，用的是vue-cli3作为脚手架。
看安全检测的报告，内容截图里，是Chrome Devtools - Sources下面有webpack-internal: //和 webpack://两个目录。在这两个目录下，直接点击文件，可以看到接近源码的代码。

测试环境编译配置没有手动开启sourceMap，编译产物里不应该存在sourceMap文件。后来去检查了下network，也确实没有sourceMap文件(如xxx.js.map之类的文件)出现。

上文已经说了问题出在webpack-internal: // 和 webpack:// 这两个目录，也讲述了这两个文件夹是怎么来的。

webpack-internal:// 和webpack:// 目录，是浏览器遍历文件，解析dataURL信息(sourceURL和sourceMappingURL)后再逐一生成的。

现在问题是这些个dataURL信息(sourceURL和sourceMappingURL)怎么在编译时不要产出。

查找了vue-cli的文档
找到了一个productionSourceMap项 仅控制生产环境的sourceMap是否开启
https://cli.vuejs.org/zh/conf...

那么我有个猜测，出现dataURL的原因是在非生产环境，vue-cli的默认配置里，sourceMap是开启的(即 devtool !== false且 devtool !== undefined)
https://www.webpackjs.com/con...

动手尝试：
1、尝试通过chainWebpack，将devtool设置为false。设置之后，编译产物文件内容中依然会出现dataURL。失败。
2、尝试通过configureWebpack，将devtool设置为false。设置之后，编译产物文件内容中没有dataURL了，部署到线上测试环境，也不会出现webpack-internal:// 和webpack:// 目录了。成功。

既然通过修改devtool的设置关闭sourceMap输出，成功让编译产物中的dataURL消失，那么我们可以断定非生产环境时，vue-cli的devtool配置肯定不是false。

总结：通过配置configureWebpack项，将devtool设置为false，即可使编译产物中的dataURL信息消失。

同步更新到自己的语雀
https://www.yuque.com/diracke...