总所周知,在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. CVE-2017-12635(Couchdb垂直权限绕过漏洞)

    简介 Apache CouchDB是一个开源数据库,专注于易用性和成为"完全拥抱web的数据库".它是一个使用JSON作为存储格式,JavaScript作为查询语言,MapRedu ...

  2. phpstudy、Apache安装DVWA教程

    1.下载DVWA(http://www.dvwa.co.uk/) 2.解压缩DVWA安装包到服务器的目录下 Apache: \Apache24\htdocs phpStudy: \PHPTutoria ...

  3. ssh端口转发学习笔记

    ssh端口转发学习笔记 ssh命令参数介绍 -C 压缩数据传输 -f 将 ssh 转到后台运行,即认证之后,ssh 自动以后台运行.不在输出信息 -n 将 stdio 重定向到 /dev/null,与 ...

  4. Java Study day3

    Day 2 遗留问题: cmd javac编译和 java执行 程序输出Hello World 遗留问题解答: 首先使用Txt记事本写一个后缀为.java的HelloWorld.java程序,直接复制 ...

  5. Python 的排序方法 sort 和 sorted 的区别

    使用 sort() 或内建函数 sorted() 对列表进行排序.它们之间的区别有两点: sort() 方法是对原列表进行操作,而 sorted() 方法会返回一个新列表,不是在原来的基础上进行操作. ...

  6. P5017 [NOIP2018 普及组] 摆渡车

    P5017 [NOIP2018 普及组] 摆渡车 题目 P5017 思路 将实际问题抽象后,不难发现这是一个 区间 \(DP\) 我们不妨认为时间是一条数轴,每名同学按照到达时刻分别对应数轴上可能重合 ...

  7. redis实战课题

    redis实战课题 本课题主要围绕用户登录时,直接到redis中查找用户的登录信息,密码验证.重置密码.查询所有用户.显示登录次数最多的前3位,最后通过(C# SQL)持久化到SQL Server 数 ...

  8. 10年.NET老程序员推荐的7个开发类工具

    做.NET软件工作已经10年了,从程序员做 到高级程序员,再到技术主管,技术总监.见证了Visual Studio .NET 2003,Visul Studio 2005, Visual Studio ...

  9. CF1404E Bricks (最大权独立集)

    考虑把答案进行转化,通过分矩形条,我们能去掉一些夹在#之间的边 那么答案= #个数 - 能去掉的边个数 但去掉是有限制的,同一个#格子的横边和竖边不能同时去掉 把边转化成点,限制变成边. 横竖边的点 ...

  10. 学习廖雪峰的Git教程2--远程仓库

    今天跳过之前版本管理,先来学习远程仓库内容: 1.创建ssh(这是为没有ssh key准备的,如果有就可以进行下一步: 敲入 $ ssh-keygen -t rsa -C "youremai ...