Jia him

Appearance

在接手的项目中，发现开发环境使用了压缩版本的 vue ​

省流 ​

发现 vue2 使用 vue-devtools插件，明明正确安装并且插件也显示检测到了项目，但是开发者工具面板就是不显示 vue 的面板。

原因是在开发环境也使用了压缩版本的 vue，导致不支持这个功能，将开发环境的 vue 版本换成完整版后解决该问题。

官方强调过，**一定不要在开发环境使用Vue的压缩版本！**它会将一些严重的问题报错信息隐藏起来。

背景简述 ​

去年底接手了其他团队转移过来的维护项目，它们基本都是同一个人搭起来的vue2基础框架，然后其他同事在框架基础上进行业务开发。

接手过来的时候就有点奇怪，怎么这个系列项目，都无法使用 vue-devtools 查看 vue 实例的实时状态。当时对这部分也不熟，加上业务工作众多，也就放一边先不管了。

刚好这两天又有相关的业务需求，然后我确实也需用 vue-devtools 来看数据，所以就又回去看了下，为什么会有这种情况。

处理过程 ​

检索寻找思路 ​

经过一番 Google ，我在官方文档的 FAQ 里找到相关的问答，里面提到在 Vue2 的条件下，可以按照这几条去检查：

  1. 确认已经正确安装了 vue-devtools
  2. 检查是否使用了生产或者压缩版本的 vue（可能是同过 CDN 或离线压缩包的情况）
  3. 先关掉浏览器的开发者工具面板，再打开面板，可能就出现了
  4. 重启浏览器或者电脑
  5. 如果安装了多版本的 vue-devtools，推荐关掉或删掉其他的版本，仅保留其中一个
  6. 关掉其他开发插件，比如 React devtools
  7. 检查浏览器的 console 是否有打印报错
  8. 更新你项目中的依赖（删掉 node_modules, 然后 npm i 之类的）
  9. 就算在浏览器的 toolbar 上，vue 的 logo 是灰色的，你仍可以打开开发者工具面板，看看是否有显示 vue 的面板

还有一个点，Vue.config.devtools设置为 false，也会导致不显示。但是我甚至已经将它显示地设置过为true，依旧无效。

另外如果感兴趣官方的完整内容，可以查看官方的F.A.Q.

这里是我这次涉及的部分：The Vue devtools don't show up

寻找关联的可能点 ​

而这次对我产生影响的，就是第二点，也就是项目实际上使用了离线压缩包。那么，我是如何找到我使用了离线压缩包的呢？ 除了第二点，其他的我都很熟悉了：

  • 1 我装过了无数次，所以不存在这种低级错误
  • 3 这种也很熟悉，我经常这么做解决看不到面板的问题
  • 4 刚好这段时间我电脑重装过，这个问题的可能性较低
  • 5 理由同 1，且我只装 1 个版本
  • 6 没有其他插件了
  • 7 没有报错
  • 8 因为重装的关系，这个原因大概率不是
  • 9 不是灰的，是绿的

我在浏览器的开发者工具中，同过网络面板，发现里面有一个请求是 vue.min.js，看到这个，基本和第二点提到的就八九不离十了。

在 vscode 中全局搜索 vue.min.js，找到了在 index.html 和 webpack 的配置文件中都找到关联的配置，它没有区分生产环境和开发环境，直接使用了保存在项目中的 vue 压缩文件，而没有使用安装的依赖 vue 的文件。

验证方案 ​

对 webpack 相关的配置进行调整，区分开发环境和生产环境，开发环境使用依赖的完整版 vue，生产环境依旧使用压缩版本的 vue。在完成相关调整后，重启项目，ok，vue 的面板在开发者工具中显示出来了。

小结 ​

该问题的严重性 ​

vue 官方文档有提示过，不应该在开发环境使用压缩版本！，不仅仅是导致 vue-devtools出不来这么简单，而是会导致很多 vue 的错误检查不会在开发阶段提示出来！

而情况也是，在我改正了对应的 Vue 完整版后，控制台报出了不少错误，各种因为依赖顺序等导致的错误。也因为使用了压缩版，之前经手的开发同事没人发现之前的问题，在这次全部一点点暴露出来，改掉了 a 错误，代码执行带后面带出来了 b 错误，以此类推……

最后也是经过了整体的调整，终于把项目中的各种异常错误改正了过来。

如果前面提到的风险是已知的风险的话，那后面我可能还会遇到一些未知的风险。

因为工作中有版本的关系，在工程的持续集成的过程中还要持续关注，因为在生产环境打包后，是否功能还正常，是否会受到我这次调整的影响，都是未知数，我要在完成开发需求并部署到测试环境后，持续关注。

后续的措施 ​

管理角度 ​

好在这次调整的代码项目是规模比较小的，但是其他几个相关的项目，都有类似的情况，可以想象，也是同样的原因导致的。

所以后续对其他几个项目的改造，尽管现阶段它不改造，也没有问题，因为已经稳定跑了几年了，从工作的角度看，可以先不动，在基建没有跟上之前，降低对业务的影响。但是长期来看，至少要让团队中的人知道，这里存在这个风险，并且在合适的时机，进行处理。

技术角度 ​

如果无法看到 vue-vue-devtools，在排除低级错误的前提下，可以参考以下方案：

  • 重新打开开发者工具面板可能可以解决
  • 看看有没有地方将 Vue.config.devtools 设置成了 false
  • 看看是否使用了压缩版本或者生产版本的 vue，全局搜索 min.js 看看是否存在 vue 相关的压缩版