位置: 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分割语句)

  • 美版airpods和国行有啥区别(airpods美版国行可以混用吗)

    美版airpods和国行有啥区别(airpods美版国行可以混用吗)

  • 手机qq分享屏幕为什么没有全部显示(苹果手机qq分享屏幕)

    手机qq分享屏幕为什么没有全部显示(苹果手机qq分享屏幕)

  • 微信退还钱对方有提醒吗(微信退还钱对方显示吗)

    微信退还钱对方有提醒吗(微信退还钱对方显示吗)

  • 小米一直开机关机循环怎么办(小米一直开关机怎么办)

    小米一直开机关机循环怎么办(小米一直开关机怎么办)

  • 退款单号是什么意思(退款单号是订单号还是快递单号)

    退款单号是什么意思(退款单号是订单号还是快递单号)

  • 抖音被禁言是永久的吗(抖音被禁言是永久怎么解除)

    抖音被禁言是永久的吗(抖音被禁言是永久怎么解除)

  • 如何在淘宝购买陌陌号(怎么在淘宝上架商品)

    如何在淘宝购买陌陌号(怎么在淘宝上架商品)

  • 后置自拍怎么看到画面(后置摄像自拍)

    后置自拍怎么看到画面(后置摄像自拍)

  • 手机黑屏一直转圈圈怎么回事(手机黑屏一直转圈怎么办)

    手机黑屏一直转圈圈怎么回事(手机黑屏一直转圈怎么办)

  • 怎么搜索别人的抖音号(怎么搜索别人的简历)

    怎么搜索别人的抖音号(怎么搜索别人的简历)

  • 电信关闭4g通话是什么意思(电信卡关闭4g服务)

    电信关闭4g通话是什么意思(电信卡关闭4g服务)

  • 苹果11默认铃声是什么(苹果11默认铃声叫什么名字)

    苹果11默认铃声是什么(苹果11默认铃声叫什么名字)

  • ipad可以登录pc端吗(ipad可以登陆网页吗)

    ipad可以登录pc端吗(ipad可以登陆网页吗)

  • 乐视怎么插耳机(乐视2怎么插耳机)

    乐视怎么插耳机(乐视2怎么插耳机)

  • 华为mate30有5g功能吗(华为 mate30 5g)

    华为mate30有5g功能吗(华为 mate30 5g)

  • 魅族16th plus尺寸(魅族16thplus尺寸参数)

    魅族16th plus尺寸(魅族16thplus尺寸参数)

  • iphonex滚动截屏(iphonexs滚动截长图)

    iphonex滚动截屏(iphonexs滚动截长图)

  • 荣耀手环4能打电话吗(荣耀手环4能打王者吗)

    荣耀手环4能打电话吗(荣耀手环4能打王者吗)

  • 朋友圈显示全文技巧(朋友圈显示全文带图片)

    朋友圈显示全文技巧(朋友圈显示全文带图片)

  • 苹果旁白怎么快速关闭(苹果旁白怎么搞)

    苹果旁白怎么快速关闭(苹果旁白怎么搞)

  • 小米盒子我的应用没了(小米盒子我的应用无法返回)

    小米盒子我的应用没了(小米盒子我的应用无法返回)

  • 优酷app弹幕怎么设置(优酷app弹幕怎么关)

    优酷app弹幕怎么设置(优酷app弹幕怎么关)

  • 怎样设置嗨来电(嗨来电怎么设置视频教程)

    怎样设置嗨来电(嗨来电怎么设置视频教程)

  • 抖音怎样设置不让转发(抖音怎样设置不让别人看到我的关注)

    抖音怎样设置不让转发(抖音怎样设置不让别人看到我的关注)

  • csrss32.exe是病毒程序吗 是安全进程吗 csrss32进程查询(srv.exe病毒)

    csrss32.exe是病毒程序吗 是安全进程吗 csrss32进程查询(srv.exe病毒)

  • GPT-4最震撼我的一点(gpt最大)

    GPT-4最震撼我的一点(gpt最大)

  • 进项税抵扣怎么弄
  • 支付给派遣员工的工资计入应付职工薪酬吗
  • 纳税筹划的方法有哪些
  • 疫情期间发生的费用进什么科目
  • 固定资产入账原值含税价吗
  • 一般户用途可以是往来款吗
  • 投资收益科目在贷方
  • 医院收费单能当凭证用吗
  • etc预付发票可以抵税吗
  • 珠宝属于什么行业领域
  • 事业单位银行存款余额组成
  • 无形资产研究阶段的支出全部费用化
  • 预收账款核算内容是什么
  • 出口退税的城建税和教育费附加怎么算
  • 产品售后维修费分录
  • 电子发票隔月可以报销吗
  • 物业公司收的电梯费如何做账
  • 失控发票的账务处理
  • 社会保险差额征税的账务处理?
  • 我国税收法律制度不采用的税率是
  • linux日期格式
  • window10最新20h2
  • 关于激活函数的说法错误的是
  • PHP:mb_send_mail()的用法_mbstring函数
  • coolmark是病毒吗
  • window10解压
  • aliapp.exe是什么意思
  • 补缴的土地出让金契税
  • 银行本票实际金额小于票面金额
  • 路由器重启以后wifi不见了
  • 设备租赁费属于劳务吗
  • 货物运输业增值税专用发票
  • 纳税人销售免税货物
  • 变动成本产品成本包括哪些
  • php ioc
  • 发票过账和不过账是什么意思
  • 注销报税是什么意思
  • 计算机视角技术
  • vue组件入门
  • 如何使用扫描王
  • 以房抵债的税会退税吗
  • 一般纳税人差额纳税
  • 制造行业结转成本
  • 销售收入和销售收入净额的区别
  • 会计人员信息采集怎么填
  • sql 列数
  • 一般纳税人一直零申报会怎么样
  • 支付运费的会计怎么记录运输费
  • 小规模进项是专票销项是普票可以抵扣吗
  • 销售返利可以计入销售费用吗
  • 固定基金减少的理由
  • 老板垫付工资账务处理
  • sql时间格式化大全
  • windowsxp无法定位程序输入点
  • win10 电池报告
  • windowsxp删除所有内容
  • linux安装有哪几种方式
  • 本地磁盘安装
  • win7的开始菜单在哪里
  • xp系统怎么调性能
  • win8.1黑屏
  • 开源镜像下载到本地
  • pqhelper.exe是什么进程 pqhelper进程查询
  • XP系统升级WIN7系统
  • 设置全局
  • 环境变量windows
  • bootstrap按钮的风格有哪些?
  • android get
  • 触摸模式设置
  • clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
  • 用javascript
  • jquery中的动画吗,是怎样用的
  • 国家税务总局现任局长
  • 北京大兴国税局领导班子
  • 税务个人廉洁谈话记录内容
  • 山东省地方税务局印花税核定征收管理办法
  • 出口退税需要哪些
  • 上海税务办事大厅电话
  • 日本快递税率
  • 双休日可以拿房产证吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设