为什么某些用 vue.js 创建的 web 应用，直接用 chrome 的检查工具就能直接看到项目源码？

• 資深大佬 : BarZu

  sourceMap

• 資深大佬 : assassin1993zj

  线上环境不推荐配置 sourceMap 为 true，这样会暴露源代码的

• 資深大佬 : ruby109

  dlsite 草

• 資深大佬 : Austaras

  生产环境建议 nosources-source-map

• 資深大佬 : autoxbc

  Web 是 text 不是 binary，这么设计就是说，代码给人看看没什么了不得的

• 資深大佬 : nezumi85757

  @autoxbc 也要看技术变迁啊，构思之初浏览器做的事情跟今天浏览器里跑的应用已经是天差地别了，安全性上来说把底裤全漏实在不妥

• 資深大佬 : belin520

  https://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

• 資深大佬 : autoxbc

  @nezumi85757 #6 大站前端不压缩不混淆的多了去了，因为这跟安全没什么关系。业界准则是：有秘密放后端，没密码代码随便看

• 資深大佬 : autoxbc

  @autoxbc #8 密码 -> 秘密

• 資深大佬 : nezumi85757

  @autoxbc 所以说还是看开发怎么做决策啊，我不知道你记不记得这样一件事情，小米 5 还是 6 的时候官网抢手机，一秒就光了，结果被人扒代码一看，抢的这一步在前台就给你打回了，就是个随机值，然后自然的用户就去微博闹了，这种情况哪怕混淆一下，被人发现作假的几率也会小很多吧

• 資深大佬 : chairuosen

  前端源码随便看，不能看的代码不放前端

• 資深大佬 : catteroLo

  感觉这不是 sourcemap 的问题，这是直接把 webpack-dev-server 反代出来啊

• 資深大佬 : zhuweiyou

  sourcemap 了解一下，另外哪怕没有 sourcemap，全是 abcd 懂 JS 的人也能分析你的逻辑的。前端没有秘密。

• 資深大佬 : AlphaTr

  sourcemap 在起作用，是为了方便开发者调试；所以上线的代码应该把 sourcemap 去掉

• 資深大佬 : ibegyourpardon

  前端没有秘密。

  但是有成本。

  混淆还是要做的。

• 資深大佬 : miniwade514

  @catteroLo +1 整个目录结构全部暴露出来了

• 資深大佬 : 9yu

  看本子呢？
• 資深大佬 : miniwade514

  我觉得这就是人为操作的问题，要么是作者没意识到这样会暴露源代码，要么就是他根本不在乎，随便看。
  上一些人说的容易让人误以为这是常规操作。

• 主 資深大佬 : watanuki

  @catteroLo #12 不会吧，这是个已经上线了的项目，怎么可能用 dev-server ？

• 資深大佬 : DOLLOR

  sourceMap 可以提供源代码映射。
  此站发布代码的时候，忘了删除 map 文件，意外地导致项目源代码泄漏。

• 資深大佬 : yhxx

  我也见过这种操作，负责的人不知道怎么部署
  服务器上跑 npm run dev，然后用 nginx 反代

• 資深大佬 : DOLLOR

  @autoxbc
  源代码文件不光有代码，还有注释，而且注释常常会暴露很多机密或隐私。就像上次的“穷 B vip”事件，忘记混淆代码，注释、变量名的信息被好事者扒了出来。
  自那以后我就要求所有前端代码必须混淆了。

• 資深大佬 : cuzfinal

  这服务器跑的是开发模式，webpack 协议还连着呢

• 資深大佬 : Mutoo

  有些小开发商为了方便线上 debug 会在 production build 的时候启用 sourcemap
  https://webpack.js.org/configuration/devtool/#root

  方便调试的同时暴露源码。不过对其它前端来说可是大好消息，可以下载下来学习、分析。
  为些我还写了一个 sourcemap 解压工具
  https://github.com/mutoo/webpack-sourcemap-unpacker

• 資深大佬 : pcwow

  开了 Sourcemap

  https://play.dlsite.com/dist/js/play.bundle.js

  https://play.dlsite.com/dist/js/play.bundle.js.map

• 資深大佬 : DOLLOR

  那个并不是“webpack 协议”，而是利用“sourceURL”指令修改了源代码在浏览器在开发者工具的映射位置。
  你可以试着在浏览器控制台粘贴以下代码和注释
  “`
  console.log(‘see sources tab’)
  //@ sourceURL=myprotocol:///my.domain.com/myfile.js
  “`
  然后你会在源代码标签里发现这段代码被神奇地映射在 URL“myprotocol:///my.domain.com/myfile.js”文件里。
  这里的地址，你可以任意改的，不受跨域之类的限制，只要符合规则。

• 資深大佬 : dcatfly

  最大的可能是用了脚手架工具 但是忘了删除 sourcemap

• 資深大佬 : ibegyourpardon

  @yhxx 会反代不会打包部署。。。

  我是不太明白这脑回路。。。

• 資深大佬 : wo152

  要么是为了赶上线，要么是代码技术问题，要么其实也不算什么秘密了。。。。我司是只要没什么秘密的东西放前端不混淆也是可以的。

• 資深大佬 : cweijan

  dev-server 只是一个 http-server, 起作用的是 source map, 用一个 source map 的 js 举例
  http://localhost:3000/app.js, 那么该 js 最下方会有一条这样的注释
  //# sourceMappingURL=app.js.map 浏览器则会去加载他的 map
  http://localhost:3000/app.js.map
  文件内容如下
  {
  “version”: 3,
  “file”: “app.js”,
  “sources”: [
  “webpack:///webpack/bootstrap”,
  “webpack:///./node_modules/@babel/runtime-corejs2/core-js/array/from.js”,
  “webpack:///./node_modules/@babel/runtime-corejs2/core-js/array/is-array.js”,
  “webpack:///./node_modules/@babel/runtime-corejs2/core-js/get-iterator.js”,
  “webpack:///./node_modules/@babel/runtime-corejs2/core-js/is-iterable.js”
  ],
  “sourcesContent”: [],
  “sourcesRoot”: “”
  }

  前端代码即使进行了混淆压缩, 但 source map 没有关闭, 仍然会在浏览器进行加载

• 資深大佬 : lq0128

  项目在 build 时,webpack 中会有一个叫 productionSourceMap 的配置属性,设置成 fasle,项目在打包后就看不到源码目录结构