Vue 生产环境(production) 打开 调试工具的方法
总所周知,在production生产环境下,点击vue插件会显示,
并且按F12是没办法使用调试工具的,这样非常不方便

其实是有一个办法的,那就是复制下面的js,然后在控制台执行 代码中已经写清楚执行步骤了
function openVueTool(){
//在方法中执行,避免污染全局变量
//开启vue2 production调试的方法
//1.找vue实例,可以说99%的应用是用的app.__vue__
//如果实在找不到,那么就到找到任意组件,用组件元素.__vue__.$root来获取
var vue = app.__vue__
//2.vue构造函数
var constructor = vue.__proto__.constructor
//3.Vue有多级,要找到最顶级的
var Vue = constructor;
while(Vue.super){
Vue = Vue.super
}
console.log(Vue)
//4.找到config,并且把devtools设置成true
Vue.config.devtools = true;
//5.注册到Vue DevTool上
var hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
hook.emit('init',Vue)
//6.如果有vuex store,也注册//这部分代码参考了https://blog.csdn.net/weixin_34352449/article/details/91466542
if(vue.$store){
var store = vue.$store;
store._devtoolHook = hook;
hook.emit('vuex:init', store);
hook.on('vuex:travel-to-state',function(targetState){
store.replaceState(targetState);
});
store.subscribe(function(mutation, state){
hook.emit('vuex:mutation', mutation, state);
});
}
}
openVueTool();
Vue 生产环境(production) 打开 调试工具的方法的更多相关文章
- Vue生产环境调试的方法
vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决.. 原理 先说下vue如何判断devtools是否可用的. vue devtools扩展组件会在window ...
- Vue生产环境部署
前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue ...
- 一种简单的生产环境部署Node.js程序方法
最近在部署Node.js程序时,写了段简单的脚本,发觉还挺简单的,忍不住想与大家分享. 配置文件 首先,本地测试环境和生产环境的数据库连接这些配置信息是不一样的,需要将其分开为两个文件存储 到conf ...
- Vue 生产环境部署
简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一. ...
- vue生产环境清除console.log
npm run build 后的生产环境的代码,会有很多开发时留下的console.log(),不可能每个页面不停地删除 在build/webpack.prod.conf.js文件里加上这样一段代码即 ...
- VUE生产环境打包build
1.进入到项目根目录执行 npm run build 此时会自动打包在dist目录下 2.安装服务 npm install -g serve 3.启动 serve dist 总结: 以上就是生产环境 ...
- vue 生产环境 background 背景图不显示原因
通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片 ...
- 零基础 Vue 开发环境搭建 打开运行Vue项目
[相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...
- vue 生产环境和测试环境的配置
我们引用的是axios 给src目录增加 api 文件夹 里面写上index.js // 配置API接口地址 var root = process.env.API_ROOT // 引用axios va ...
随机推荐
- golang实现WebSocket的商业化使用的开发逻辑(1)
WebSocket是什么 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议.其最大特点之一就是:服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对 ...
- CentOS6跟CentOS7的区别
1.CentOS6在/etc/profile配置环境变量是JAVAHOME,CentOS7是{JAVA_HOME} 2.
- Kafka01--Kafka生产者使用方式
Kafka之--生产者入门 前言: Kafka诞生至今,产生两个版本的生产者客户端:1是早期基于scala语言编写的客户端:2是随着Java用户的广泛涌入,kafka0.9版本开始退出Java版本的客 ...
- 什么是Hystrix断路器?我们需要它吗?
由于某些原因,employee-consumer公开服务会引发异常.情况下使用Hystrix我们定义了回退方法.如果在公开服务中发生异常,则回退方法返回一些默认值 . 如果firstPage metho ...
- 线程 B 怎么知道线程 A 修改了变量?
1.volatile 修饰变量 2.synchronized 修饰修改变量的方法 3.wait/notify 4.while 轮询
- ArrayList 与 LinkedList 的不区别?
最明显的区别是 ArrrayList 底层的数据结构是数组,支持随机访问,而 LinkedList 的底层数据结构书链表,不支持随机访问.使用下标访问一个元素, ArrayList 的时间复杂度是 O ...
- 什么是基于 Java 的 Spring 注解配置? 给一些注解的例子?
基于 Java 的配置,允许你在少量的 Java 注解的帮助下,进行你的大部分 Spring 配置而非通过 XML 文件. 以@Configuration 注解为例,它用来标记类可以当做一个 bean ...
- Effective Java —— 谨慎覆盖clone
本文参考 本篇文章参考自<Effective Java>第三版第十三条"Always override toString",在<阿里巴巴Java开发手册>中 ...
- logback日志级别动态切换的终极方案(asm使用)
背景 一切皆有因果,所有事情,都有事件驱动.本方案的日志级别切换是由这样的背景下产生的: 单个生产环境上,有几百近千个微服务 日志级别切换不重启服务,要求即时生效果 由业务开发人员去修改代码或增加相关 ...
- WebView的一些简单用法
一直想写一个关于 WebView 控件的 一些简单运用,都没什么时间,这次也是挤出时间写的,里面的一些基础知识就等有时间再更新讲解一下,今天就先把项目出来做一些简单介绍,过多的内容可以看我的源码,都传 ...