Vue Devtools调试工具安装和vue.js not detected解决办法

Vue Devtools 是一款用于调试vue应用的插件，该工具可以极大地提高我们开发和调试的效率。

Vue Devtools的安装方式：

1. 方式一

在Vue Devtools Github地址里有Vue Devtools的介绍和官方推荐的安装方式，包括 直接下载对应浏览器的插件 和 手动安装 的方式。

• 直接下载对应浏览器的插件
  
  如果能上外网，就可以通过以上方式安装。

• 手动安装
  克隆Vue Devtools代码，安装脚手架，再打包生成Vue Devtools Chrome插件。
  
  除了用yarn方式安装脚手架，还可以用我们常用的npm来安装。安装过程中可能会遇到很多问题，网上都有解决办法，这里不重复了。
  注意不同版本打包出来文件的放置目录有所不同，具体目录见官方说明（上图在第7条说明了打包后文件的目录地址）。

2. 方式二

另一种是通过chrome应用商店直接安装，这种安装方式非常简单，但是需要能上外网才能下载。

点击Chrome右上角的应用按钮，进入chrome应用商店，在左侧直接搜索，就可以看到这个插件了。

3. 方式三

通过各种提供chrome插件的网页下载插件。这里提供其中一个网页：vue调试工具插件

为防止该网页下载地址失效，以下是备份文件：
百度网盘，提取密码：k0s1

将下载的文件进行解压，解压完之后，文件内容如下：

打开谷歌浏览器，点击右上角，选择更多工具按钮，选择扩展程序，然后将之前解压的Vue.js Devtools_5.3.3_chrome.zzzmh.cn.crx文件拖拽到扩展程序界面，按照对应提示点击确认即可。

---

安装Vue Devtools后配置相关属性

通过以上三种方式的任意一种方式安装好插件后的界面如下，要注意打开开发者模式和工具的开关按钮。

对本地项目开发调试，还需要勾选 “允许访问文件网址”，配置方式如下：
点击上图中所示的详细信息按钮，打开如下界面，勾选红框圈出来的内容，允许访问文件网址。

---

vue.js not detected 解决办法

部分人安装好后进入自己的vue项目图标是灰色的，点击它会提示 ‘ vue.js not detected ’。
此时你需要确认以下几点：

1. 开发者工具选项是否已经打开
2. 如果是本地项目，那么检查你是否已经开启了详细信息中允许访问文件网址的权限
3. 是否打开了插件的开关
4. B站和CSDN博客管理都是使用Vue框架开发的，通过进入B站或CSDN的博客管理可以判断该插件是否安装成功。若该图标不为彩色则该安装的插件有问题，请重新下载安装；若为彩色则说明该插件安装成功，此时你可以修改manifest.json文件中的persistent属性来解决vue.js not detected问题，详见下方文本。

除以上外还需要额外注意：（这两个本人没试过，不清楚这两种情况是否会引起vue.js not detected 问题，如果修改manifest.json文件的属性不起效果，可以检查一下这两种情况是否存在）

1. 开发中引入的vue文件，文件名必须 为“vue.js”，不能为其他。
2. 引入的vue 文件必须是开发版本的文件，不能是生产版本。
   

修改 manifest.json 文件中 “persistent” 属性为 true

如果找不到文件位置，可以在文件管理器中直接搜索文件夹：nhdogjmejiglipccpnnnanhbledajbpd。
通常该文件的存放地址在：C:\Users\ 你的电脑用户名 \AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\ 对应的Vue Devtools插件版本号。

---

【参考文档】：

1. vue.js not detected 解决办法-vue.js devtools 安装
2. Vue安装Vue Devtools调试工具提示 Error: Cannot find module ‘@vue-devtools/build-tools’ 解决办法