位置: IT常识 - 正文

Vue生产环境调试的方法(vue 生产环境)

编辑:rootadmin
vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决。用本文提供的方法就可以实现线上debug vue,也不需要在浏览器上打断点。 原理 先说下vue如何判断devtools是否可用的。 vue devtools扩展组件会在window全局注入__VUE_DEV ...

推荐整理分享Vue生产环境调试的方法(vue 生产环境),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue生产环境和测试环境切换,vue生产环境和测试环境切换,vue项目开发环境和生产环境配置,vue项目开发环境和生产环境配置,vue测试环境 生产环境,vue生产环境和测试环境切换,vue配置生产环境开发环境,vue生产环境怎么调试,内容如对您有帮助,希望把文章链接给更多的朋友!

vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决。用本文提供的方法就可以实现线上debug vue,也不需要在浏览器上打断点。

原理

先说下vue如何判断devtools是否可用的。

vue devtools扩展组件会在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__变量,Vue就是根据这个变量判断是否需要调试的。

vue根实例初始化之前判断Vue.config.devtools是否为true。若为true,

则调用window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', Vue)方法初始化调试面板。

Vue生产环境调试的方法(vue 生产环境)

本方法的原理都写在代码的注释当中

方法步骤

1.复制下面的js代码,按F12 粘贴到控制台执行

2.关闭控制台,再打开控制台 就能看到Vue面板了

代码和插件已经上传到githubhttps://github.com/xcr1234/vue-devtools-production复制dist/main.js的内容粘贴到控制台

代码(Vue2)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设置成trueVue.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/91466542if(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();代码(Vue3)var vue = app.__vue_app__const hook = window['__VUE_DEVTOOLS_GLOBAL_HOOK__']hook.emit('app:init',vue,vue.version,{ Fragment: 'Fragment', Text: 'Text', Comment: 'Comment', Static: 'Static'})

View Code

缺点

这个方法只是对当前标签页有效,就是说,如果你不小心(出于习惯)刷新了一下页面,或者有新标签页打开其他路由的需求,就需要重新走一遍上面的步骤。

长期解决方法

在浏览器安装Tampermonkey插件,推荐用edge浏览器

安装后去greasyfork安装插件

本文链接地址:https://www.jiuchutong.com/zhishi/310970.html 转载请保留说明!

上一篇:织梦后台文章编辑器一片空白解决方法(织梦内容页模板修改)

下一篇:python分割拼接函数的介绍(python分割语句)

  • 2016年度网络热词TOP10新鲜出炉!(2016年十大网络流行语)

    2016年度网络热词TOP10新鲜出炉!(2016年十大网络流行语)

  • 苹果13夜间模式怎么关闭(苹果13夜间模式30秒)

    苹果13夜间模式怎么关闭(苹果13夜间模式30秒)

  • 10010查流量发什么数字(10010流量查询电话)

    10010查流量发什么数字(10010流量查询电话)

  • vivox50能支持wifi6吗(vivox50支持无线充电器吗)

    vivox50能支持wifi6吗(vivox50支持无线充电器吗)

  • 抖音拍同款怎么加歌词(抖音拍同款怎么拍)

    抖音拍同款怎么加歌词(抖音拍同款怎么拍)

  • 华为mate30圆圈怎么关闭(华为mate30屏幕中的圆圈)

    华为mate30圆圈怎么关闭(华为mate30屏幕中的圆圈)

  • 酷我音乐注销失败(酷我注销账号)

    酷我音乐注销失败(酷我注销账号)

  • 华为手机的镜子怎么打开(华为手机的镜子怎么找)

    华为手机的镜子怎么打开(华为手机的镜子怎么找)

  • asf格式文件怎么打开(asf格式文件怎么打开 苹果手机)

    asf格式文件怎么打开(asf格式文件怎么打开 苹果手机)

  • qq共同好友怎么关闭(qq共同好友怎么找出来具体的人)

    qq共同好友怎么关闭(qq共同好友怎么找出来具体的人)

  • 笔记本电脑能换显卡和cpu吗(笔记本电脑能换电池)

    笔记本电脑能换显卡和cpu吗(笔记本电脑能换电池)

  • 联想电脑f12看不见u盘(联想电脑f12看不到机械硬盘)

    联想电脑f12看不见u盘(联想电脑f12看不到机械硬盘)

  • 为什么录音没有声音(为什么录音没有对方的声音)

    为什么录音没有声音(为什么录音没有对方的声音)

  • 抖音的母公司叫什么名字(抖音母公司简介)

    抖音的母公司叫什么名字(抖音母公司简介)

  • 小米8可以投屏电脑吗(小米8可以投屏在墙上吗)

    小米8可以投屏电脑吗(小米8可以投屏在墙上吗)

  • qq为什么远程控制连不上(qq为什么远程控制自动断了)

    qq为什么远程控制连不上(qq为什么远程控制自动断了)

  • 微信ipad和手机同时在线怎么设置(微信ipad和手机消息不同步怎么办)

    微信ipad和手机同时在线怎么设置(微信ipad和手机消息不同步怎么办)

  • oppoA11x是什么屏幕(oppoa11x是多大的屏)

    oppoA11x是什么屏幕(oppoa11x是多大的屏)

  • 怎么从icloud恢复照片(怎么从icloud恢复数据到手机)

    怎么从icloud恢复照片(怎么从icloud恢复数据到手机)

  • ios怎么让闪光灯常亮(苹果怎么让闪光灯一直亮)

    ios怎么让闪光灯常亮(苹果怎么让闪光灯一直亮)

  • ios13照片所有照片在哪里(13苹果图片)

    ios13照片所有照片在哪里(13苹果图片)

  • p30拍月亮怎么拍(p30怎么拍月亮好看)

    p30拍月亮怎么拍(p30怎么拍月亮好看)

  • 苹果airpods 2上市时间(苹果airpods2发售时间)

    苹果airpods 2上市时间(苹果airpods2发售时间)

  • 知道微信号怎么查抖音(知道微信号怎么查对方手机号)

    知道微信号怎么查抖音(知道微信号怎么查对方手机号)

  • Win10修改编辑hosts文件无法保存怎么办(windows 修改host)

    Win10修改编辑hosts文件无法保存怎么办(windows 修改host)

  • hiberfil文件怎么删除(hif文件怎么打开)

    hiberfil文件怎么删除(hif文件怎么打开)

  • 邮政电信业务差距大吗
  • 股权转让后企业注销个人所得税怎么处理
  • 企业残保金什么情况下可以减免
  • 主营业务收入体现在资产负债表哪里
  • 现金余额本月金额和本年累计金额怎么填
  • 工资个税计提多了实际交的少
  • 个人所得税怎么算公式是什么
  • 劳务公司劳务工资做什么科目
  • 税务局不给注销税务
  • 这部分房屋是否可以抵押
  • 证券准备包括什么
  • 2023年企业退休职工取暖费
  • 私车公用保险费用公司承担吗
  • 汽车维修行业工时标准
  • 进口代理公司怎么收费
  • 免税企业取得增值税专用发票怎么处理
  • 增值税税负率高于预警值
  • 餐厅开增值税普通发票
  • 未开票收入为负数如何写说明
  • 税收分类编码怎么导出来
  • 普通股资本成本计算方法
  • 水土保持补偿费收费标准
  • 差旅费未及时报销说明怎么写
  • 补缴地价款是什么意思
  • 管理费用怎么记忆
  • 货款打多了对方不愿意退款
  • 外管证怎么开票
  • 支付工会经费
  • 打开网页时显示无法获取属性
  • 年度利润总额是会计利润吗
  • 无形资产入账包括增值税吗
  • 购货优惠的会计科目
  • 外贸公司要计提什么费用
  • 电脑自带网速测试
  • mac怎么彻底删除一个软件
  • window10发现威胁怎么办
  • php options
  • 账务处理程序有什么
  • 应缴纳增值税计什么科目
  • 车辆购置税的计税基础
  • 最贵的一个苹果多少钱
  • swoole windows版本
  • 固定资产毁损应该填制什么凭证
  • 黄金期货交易进场规则
  • phpjoin
  • upload靶场搭建
  • vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序
  • php文件上传技术
  • 应纳税为什么是0
  • 房地产预缴所得税计算公式
  • vue笔记项目
  • python如何将字典中的键值互换
  • 委托开发软件的版权归委托人所有
  • 什么是简易征收?其公式是什么?
  • 个人所得税专项扣除2023最新政策
  • 将MySQL help contents的内容有层次的输出方法推荐
  • 取得交易性金融资产的交易费用
  • 认证发票抵扣有留抵税怎么做分录
  • 物业公司预收款账务处理
  • 关联企业是如何运作的
  • 进项增值税发票抵扣期限
  • 投资和注册资本
  • 税控盘冲红怎么操作
  • 应交税费中应交税金包含个税吗
  • 企业开发有多个产品
  • bios设置或coms设置完整的说法
  • linux nls
  • vmwares
  • window8开机
  • linux命令删除指定目录
  • 使用jquery实现的项目
  • listview安卓
  • jQuery+HTML5实现弹出创意搜索框层
  • div+css布局是什么
  • a标签跳转本地html页面
  • python如何用pi
  • 税务局验证码
  • 财税36号文附件3
  • 高新区地税办税服务厅
  • 龙岗税务分局管辖范围
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设