Vue.js devtool插件安装后无法使用的解决办法


Posted in Javascript onNovember 27, 2017

初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问。我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示vue.js not detected,无法正常使用呢?对于这样的问题,新人可能会花费很多时间去找答案,今天我们就来整理了解决方法,希望对大家有帮助。

Vue.js devtool插件安装后无法使用的解决办法

首先,我们先要确保Vue.js devtool插件已经安装成功了。具体的Vue.js devtool插件的安装方法可以:chrome插件CRX的离线安装方法中找到答案。

Vue.js devtool插件安装后无法使用的解决办法

其次,我们需要找到Vue.js devtool插件的安装目录。可以在本站文章chrome插件CRX文件的安装目录中找到插件的安装位置。话说来,我们真找不到插件的安装位置,可以在本地电脑搜索插件的ID:nhdogjmejiglipccpnnnanhbledajbpd。用户可以在插件列表中找到插件的ID,如下图所示。这是我在win8系统上chrome插件的安装位置
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\3.1.2_0

Vue.js devtool插件安装后无法使用的解决办法

第三,在找到了Vue.js devtool插件的安装目录后,打开mainifest.json文件(这是关键)。

Vue.js devtool插件安装后无法使用的解决办法

将mainfest.json中代码persistent:false,修改成persistent:true。如下图所示:

Vue.js devtool插件安装后无法使用的解决办法

一般情况下,修改完如上的位置的代码。打开vue项目后,在控制台选择vue,就应该可以正常使用了。

Vue.js devtool插件安装后无法使用的解决办法

第四,如果通过上面的方法调整过后,还是不能够使用,那么可以调整一下webpack.config.js的代码,如下图所示:

Vue.js devtool插件安装后无法使用的解决办法

最后,重启一下你的vue项目应该就可以使用了。

Vue.js devtool插件安装后无法使用的解决办法

注意:文章为本人原创,首发于下面地址。

Javascript 相关文章推荐
基于jquery自定义图片热区效果
Jul 21 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
关于Vue中axios的封装实例详解
Oct 20 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 #Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 #Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 #Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 #Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 #Javascript
解读vue生成的文件目录结构及说明
Nov 27 #Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 #Javascript
You might like
在html文件中也可以执行php语句的方法
2015/04/09 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python生成随机密码
2015/03/10 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Python中str.format()详解
2017/03/12 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python3运算符常见用法分析
2020/02/14 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
优秀本科生求职推荐信
2014/02/24 职场文书
植树节活动总结
2014/04/30 职场文书
助理政工师申报材料
2014/06/03 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
法学专业求职信范文
2015/03/19 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书