总所周知,在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) 打开 调试工具的方法的更多相关文章

  1. Vue生产环境调试的方法

    vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决.. 原理 先说下vue如何判断devtools是否可用的. vue devtools扩展组件会在window ...

  2. Vue生产环境部署

    前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue ...

  3. 一种简单的生产环境部署Node.js程序方法

    最近在部署Node.js程序时,写了段简单的脚本,发觉还挺简单的,忍不住想与大家分享. 配置文件 首先,本地测试环境和生产环境的数据库连接这些配置信息是不一样的,需要将其分开为两个文件存储 到conf ...

  4. Vue 生产环境部署

    简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一. ...

  5. vue生产环境清除console.log

    npm run build 后的生产环境的代码,会有很多开发时留下的console.log(),不可能每个页面不停地删除 在build/webpack.prod.conf.js文件里加上这样一段代码即 ...

  6. VUE生产环境打包build

    1.进入到项目根目录执行 npm run build 此时会自动打包在dist目录下 2.安装服务 npm  install -g serve 3.启动 serve dist 总结: 以上就是生产环境 ...

  7. vue 生产环境 background 背景图不显示原因

    通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片 ...

  8. 零基础 Vue 开发环境搭建 打开运行Vue项目

    [相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...

  9. vue 生产环境和测试环境的配置

    我们引用的是axios 给src目录增加 api 文件夹 里面写上index.js // 配置API接口地址 var root = process.env.API_ROOT // 引用axios va ...

随机推荐

  1. 一键生成mapper、mapperxml等文件——MybatisX插件的使用

    本文首发于西二blogs:一键生成mapper.mapperxml等文件--MybatisX插件的使用 搬运请务必转载出处. MybatisX插件使用--为快速开发而生 前言:其实很久以前我就非常厌恶 ...

  2. XSS 32个触发事件

    标签: 1.onmouseenter:当鼠标进入选区执行代码 <div style="background-color:red" onmouseenter="ale ...

  3. ubuntu忘记密码,用root修改Ubuntu密码

    今天突发奇想,想改一下ubuntu的用户名,仅仅修改了/etc/passwd中的用户名. 改完后没有用命令修改密码,直接reboot了. 结果悲剧了,登不进去了. 赶紧百度一下,结果发现,本宝宝看不懂 ...

  4. RocketMq基础 看这一篇就够了

    RocketMQ 编译安装 HelloWorld 官方网站 http://rocketmq.apache.org GitHub https://github.com/apache/rocketmq Q ...

  5. Mysql之锁(一)

    读锁与写锁 读锁:共享锁.Shared Locks.S锁. 写锁:排他锁.Exclusive Locks.X锁. 读锁:只能读不允许写 写锁:不能读也不能写,只允许自己写 但是允许其他事务进行普通的s ...

  6. 编写 Java 程序时, 如何在 Java 中创建死锁并修复它?

    经典但核心Java面试问题之一.如果你没有参与过多线程并发 Java 应用程序的编码,你可能会失败.

  7. 什么是 DAO 模式?

    DAO(Data Access Object)顾名思义是一个为数据库或其他持久化机制提供了 抽象接口的对象,在不暴露底层持久化方案实现细节的前提下提供了各种数据访 问操作.在实际的开发中,应该将所有对 ...

  8. 线程的 sleep()方法和 yield()方法有什么区别?

    ① sleep()方法给其他线程运行机会时不考虑线程的优先级,因此会给低优先级的线程以运行的机会:yield()方法只会给相同优先级或更高优先级的线程以运行的机会: ② 线程执行 sleep()方法后 ...

  9. 阐述 final、finally、finalize 的区别?

    final:修饰符(关键字)有三种用法:如果一个类被声明为 final,意味 着它不能再派生出新的子类,即不能被继承,因此它和 abstract 是反义词.将 变量声明为 final,可以保证它们在使 ...

  10. 说出 5 条 IO 的最佳实践?

    IO 对 Java 应用的性能非常重要.理想情况下,你不应该在你应用的关键路径上 避免 IO 操作.下面是一些你应该遵循的 Java IO 最佳实践: a)使用有缓冲区的 IO 类,而不要单独读取字节 ...