关于dev-tool安装方法(手动安装版)

记录一下vue调试神器dev-tool的安装过程，由于是在公司内网，也不方便挂梯子，所以手动安装——下载源码在本地编译，再添加扩展程序的方式安装。

过程如下：

一、dev-tool源码获取

git地址：https://github.com/vuejs/devtools/tree/main

这里可以选择自己需要的版本，试了挺多版本，在安装的时候会遇到各种的文件缺失的问题，所以这里选择了一个v5.1.1版本，这个安装的过程基本比较顺畅，没什么大的问题。

源码下载两种方式，

第一种直接用git下载，git访问会出现连接失败的报错，有SSL验证和代理的问题，具体的问题遇到了可以自行搜索解决方法；

这里为了方便直接点击Download ZIP下载压缩包就好。

二、源码编译

这一步主要是安装依赖和编译源码，手动安装的过程官网教程也说得非常清楚，如果下载的版本一样的话直接执行以下指令就行

npm install//安装依赖,如果使用yarn进行包管理则yarn install
npm run build

完成后可以在文件夹里找到这个文件

三、添加扩展程序

打开chrome浏览器，自定义及控制-更多工具-扩展程序，切换成开发者模式，点击加载已解压的扩展程序，选择第二步中的shells/chrome文件即可，

扩展程序的配置如下：

四、愉快地使用dev-tool

到此为止就可以使用dev-tool进行调试了，随便开一个vue项目，打开f12,切换到vue就ok了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。