解决浏览器中 vue-devtools 不显示的问题

问题

vue 项目中浏览器右上角可以显示出插件，但是控制台却没有显示。

解决

出现这种情况，一般三种可能：

1. 一种是 vue-devtools 的配置错误，我们需要进入到 vue-devtools 的详情页中，将“允许访问文件网址勾选起来”。
   

2. 第二种情况是因为入口文件（main.js）中禁用了 vue 调试工具：Vue.config.devtools = false 把它设置为 true 即可。

3. 第三种情况是项目使用了 externals 打包优化

   • 可以在 index.html 和 vue.config.js 中看到如下代码
     
     
   • 因为使用了 vue 的压缩版本，所以浏览器控制台默认不显示 vue 调试工具，可以在 index.html 中加个判断条件，开发环境时不使用压缩版本。