前言:在开启Vue学习之旅时,遇到问题两个问题,第一添加不上vue devtools扩展工具,第二添加完成后,F12不显示Vue图标。查阅了很多博客,自己解决了问题,故写此博客记录。如果你遇到和我一样的问题,希望可以帮到你。
目录
1、vue devtools 扩展程序添加
2、成功添加扩展程序,但在F12没有出现Vue图标
分析问题
解决问题
3、总结
1、vue devtools 扩展程序添加
需要去谷歌商城下载,不过需要翻墙
我找了文件,亲测可用,链接永久有效!!!
连接我放下面了:
链接:https://pan.baidu.com/s/18yS1GYfjwvwMleYzyuJ1cA?pwd=MRJJ
提取码:MRJJ
将扩展程序拖到这里,然后重启电脑!!!(我当时没有重启,添加后还是没有看到添加扩展的程序),打开引入vue的程序,Console输入Vue,如下图所示,表示已经将扩展程序添加好了。开心!!!
2、成功添加扩展程序,但在F12没有出现Vue图标
点击扩展程序灰色图标,选中,给它允许。
分析问题
有很多教程说是要在manifest.json里将"persistent"改为true,但我的文件打开以后就是true。
还有,引用vue.js代码,需要是开发版本的,生产版本的看不到这个图标。
我检查了一下,我引用的是:<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>,也没有问题。
为了更好地说明白,以上两种建议都自行检查一下,引用vue.js代码检查一下自己的代码,manifest.json这个文件配置,修改步骤如下:
解决问题
检查manifest.json里"persistent"是否为true,如果不是,要改成true
这个文件manifest.json在哪?
谷歌浏览器输入:chrome://version/,将个人资料路径复制
输入路径,找到Extensions文件夹,一路向下打开文件,会看到一个manifest.json文件
我的情况都不是以上的两个问题,我进行了如下的操作,打开管理扩展程序
有权访问所有网站,允许访问文件地址,收集各项错误,都选上
然后关闭浏览器,重新打开文件, 终于Vue的图标出现了! !!
3、总结
vue学习前奏,虽然是个很简单的配置,但各种论坛博客信息很多,可能和每个人的情况都不一样,比如manifest.json这个文件在哪?很多博客就没讲清楚,当然可能我遇到的问题,和你的问题不一样,我是在翻阅了大量的资料,然后进行各种尝试,把问题解决了,如果对你也有帮助,帮忙点个赞!!!