vue-dev-tools安装踩坑

2,034 阅读2分钟

vue-dev-tools安装踩坑

vue-dev-tools是一款可以方便我们在浏览器调试我们vue项目的工具,今天总结一下我安装过程中才到的坑以及解决办法。

why

在百度上,我们可以搜索到很多版本的 dev-tools,但是现在vue3的普及,让老版本貌似有点不支持。要想让你的vue3项目也可以使用了调试工具,你需要安装最新版本的dev-tools。(ps:这里也是一个坑,就是你写vue3代码的时候发现dev-tools怎么也用不了,具体也找不出原因,最终发现需要安装最新版)。

download

作为一名程序员,最新版本的我们肯定是要去github中下载的。

vue-dev-tools

在这里就会有很多的版本,这里又有一个坑了,需要下载的应该是最新的稳定版本,开发版本最后是不可以安装成功的。

目前我这里的开发版最新是下面版本

image-20210720110955055

稳定版如下

image-20210720111053773

一定一定要下载最新版本哦

安装

下载之后解压

image-20210720111131675

以往的经验,我们第一想法肯定就是把这个文件夹拖到chrome中了

但是问题来了。直接拖进去报错了

image-20210720111309597

what?缺少文件或者不能加载?我这可是官网下载的好不好。

一同百度之后发现代码需要 安装库和构建

cd devtools-5.3.4
yarn  or  npm install
yarn build  or  npm run build

image-20210720111522352

之前说不能安装开发版就是最后build的时候会报错(不要问我怎么知道 i(╯°□°)╯︵ ┻━┻)

接下来就是要将构建好的文件夹拖到浏览器中

image-20210720111716668

文件对应如下,大家自己找一下哈,我百度看到说的文件和我这里有出入,可能是版本问题,但是通过文件名称还是很好认的。

image-20210720111817154

将将~ 安装完成啦