乐趣区

关于前端:Vue-vuecli3-配置开发环境打包关闭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…

退出移动版