14 上线后不想让人看到源码怎么做？

如果不做任何处理，默认程序员是可以看到的。

目录

如何调试数据？

在安装了Vue Devtools之后，在chrome浏览器开发模式下，打开vue面板，选择组件，然后就可以直接查看和修改data数据：

修改之后，视图即刻更新。当调试vue项目时，浏览器工具栏的Vue Devtools图标是点亮的，其它时间默认是灰色的。

如何安装 Vue Devtools?

Vue Devtools是一款基于chrome游览器的插件，用于调试vue项目。最简单的安装方式，是直接从Google Chrome Webstore安装：

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

如果不方便访问墙外资源或者想体验最新的开发版，可以从源码安装。安装步骤为：

1. 克隆源码https://github.com/vuejs/vue-devtools至本地
2. 安装模块依赖yarn install
3. 编译yarn run build
4. 在浏览器新tab页中打开chrome://extensions/
5. 勾选"开发者模式"
6. 单击 "加载已解压的扩展程序", 并且选择刚才编译的项目其目录下的shells/chrome文件夹

关于 persistent 选项等

如果扩展程序不能正常工作，通过chrome://version/查看个人资料路径：

打开该目录，在子目录下打开新安装的插件目录。子目录下mainifest.json文件是浏览器插件的配置文件，在这个文件内找到有关background的配置：

将把"persistent":false改成true。据官方文档介绍：

persistent is A Boolean value. true，indicates the background page is to be kept in memory from when the extension is loaded or the browser starts until the extension is unloaded or disabled, or the browser is closed (i.e. the background page is persistent). false，indicates the background page may be unloaded from memory when idle and recreated when needed. Such background pages are often called Event Pages, because they are loaded into memory to allow the background page to handle the events to which it has added listeners. Registration of listeners is persistent when the page is unloaded from memory, but other values are not persistent. If you want to store data persistently in an event page, then you should use the storage API.

persistent这个配置项决定扩展程序的后台持续可用性。只有当设置为true时，表示扩展程序在启动后会一直保持在系统内存中，直到扩展被卸载、禁用或浏览器关闭。

如果还不能正常调试，在浏览器中打开chrome://extensions/，查看这个“访问本地文件”的选项是否勾选：

此外，项目要运行在development模式下（即以yarn serve启动）。还有，在vue.config.js中，vue$不能指向生产环境的运行时版本或是压缩的min版本。

在开发者调试模式下，查看sources面板，可以看到引用的是vue.esm.js版本：

在运行时如何查看源码？

在sources面板中，单击暂停script按钮，有交互事情发生时，即会打开vue.esm.js文件源码。

调试时为什么可以看到源码？

调试模式下，打开html页面源码查看，生成的js代码都是经过压缩的，但是在sources面板中看到的源码却是格式化的：

这是为什么？

因为vue编译启用了source map。在vue.config.js配置中，选项productionSourceMap用于决定是否启用，并且其默认值为true。

现在将其修改为false：

productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,

接下来我们验证一下，在生产模式下编译生成的软件包，还能否看到开发源码。首先我们需要在本地启动一个web server，这一步可以通过简单安装一个现成的webserver插件实现。

全局安装webserver：

yarn global add webserver

接着执行项目编译：

yarn build

然后启动本地webserver：

webserver 8090 ./dist/

通过浏览器打开http://localhost:8090/，试图查看源码，发现此时源码已非格式化了：

当启用source map时，通过查看编译生成的文件，可以发现包括这样的内容：

//@ sourceMappingURL=xx.min.map
或者
sourceMappingURL=data:application/json;charset=utf-8;base64...

Source map是一个信息文件，里面储存着位置信息。包括代码转换后的位置，及转换前的位置。有了这个文件，当代码出错的时候，调试工具将直接显示原始代码，而不是转换后的代码。

可以识别Source map这种文件，是chrome浏览器本身就具有的功能。在Developer Tools的Setting设置中，可以看到"Enable JavaScript source maps"的选项：

为什么 Vue Devtools 可以修改项目的运行时数据？

在前面我们曾经使用vue面板，直接修改了vue组件的运行时数据。这是怎么做到的？

这是vue与Vue Devtools扩展通过合作完成的。vue框架本身在开发模式下，如果察觉到自己处于浏览器宿主环境下，并且宿主环境安装了deltools（即Vue Devtools），则向devtools发送一个init事件：

而在vue-devtools/src/hook.js文件源码中，直接监听了这个init事件，用于初始化扩展程序的生命周期：

hook.once('init', Vue => {
    hook.Vue = Vue

    Vue.prototype.$inspect = function () {
      const fn = target.__VUE_DEVTOOLS_INSPECT__
      fn && fn(this)
    }
  })

Vue Devtools通过向浏览器全局注入，让vue察觉到工具扩展的存在。随后在两者之间建立了一个web socket通道，以此实现了双向通讯。

源码

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v202001092

参考链接

• https://www.jianshu.com/p/dab699ca2fd4
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background
• https://www.jb51.net/article/150335.htm
• https://github.com/vuejs/vue-devtools
• http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html