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 相关文章推荐
农历与西历对照
Sep 06 Javascript
控制打印时页眉角的代码
Feb 08 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 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
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
我就是这样学习Python中的列表
2019/06/02 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python可迭代对象去重实例
2020/05/15 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
大学生学习自我评价
2014/01/13 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
项目采购员岗位职责
2014/04/15 职场文书
医学求职信
2014/05/28 职场文书
高考励志标语
2014/06/05 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
离婚案件原告代理词
2015/05/23 职场文书