Vue生产环境调试的方法
Python微信订餐小程序课程视频
https://blog.csdn.net/m0_56069948/article/details/122285951
Python实战量化交易理财系统
https://blog.csdn.net/m0_56069948/article/details/122285941
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)方法初始化调试面板。
本方法的原理都写在代码的注释当中
方法步骤
1.复制下面的js代码,按F12 粘贴到控制台执行
2.关闭控制台,再打开控制台 就能看到Vue面板了
代码
?
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 | 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();
|
缺点
这个方法只是对当前标签页有效,就是说,如果你不小心(出于习惯)刷新了一下页面,或者有新标签页打开其他路由的需求,就需要重新走一遍上面的步骤。
长期解决方法
在浏览器安装Tampermonkey插件,推荐用edge浏览器
安装后点开插件的管理面板,新建一个脚本 粘贴下面的代码
Vue生产环境调试的方法相关推荐
- Vue生产环境和开发环境的配置
1.在不同的环境变量文件中放置我们需要的参数 .env.production 这个文件配置的是生产环境的变量,放置线上访问的路径 VUE_APP_URL=https://cli.vuejs.org/ ...
- vue 生产环境 background 背景图不显示原因
通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片 ...
- SpringBoot+Vue生产环境打包
接上一篇开发环境下,完成开发后,打包上线 如下图所示,将index.js中assetsPublicPath改为'./' 在build目录下utils.js下如图所示位置加入 publicPath: ' ...
- 【swagger关闭】生产环境关闭swagger方法
swagger3 关闭配置(快捷方式) 配置参考 springfox:documentation:# 总开关(同时设置auto-startup=false,否则/v3/api-docs等接口仍能继续访 ...
- 蛙蛙推荐:几种典型的生产环境调试场景
http://www.cnblogs.com/onlytiancai/archive/2008/10/19/remote_debug.html 转载于:https://www.cnblogs.com/ ...
- vue在生产环境、测试环境和开发环境,三种环境下配置不同的api地址
vue在生产环境.测试环境和开发环境,三种环境下配置不同的api地址 我们大多数在开发的时候,都会有三种环境,一个是开发环境,一个是测试环境,一个是生产环境,我们打包的时候需要根据不同的环境去加载不同 ...
- 前端工程师生产环境 debugger 技巧
关注公众号 前端开发博客,领27本电子书 回复加群,自助秒进前端群 导言 开发环境 debug 是每个程序员上岗的必备技能.生产环境呢?虽然生产环境 debug 是一件非常不优雅的行为,但是由于种种原 ...
- vue开发环境和生产环境里面解决跨域的几种方法
vue开发环境和生产环境里面解决跨域的几种方法 参考文章: (1)vue开发环境和生产环境里面解决跨域的几种方法 (2)https://www.cnblogs.com/pass245939319/p/ ...
- vue 属性是变量_手把手教你如何在生产环境检查 Vue 应用程序
本已经过原作者 Damian Mullins 授权翻译. 在开发环境中,Vue devtools 是很有用. 但是,一旦部署到生产环境,它就不再可以访问我们所编写的代码. 那么发布到生产环境时,我们 ...
最新文章
- IDEA及IDEA汉化包
- 《此生未完成》痛句摘抄(3)
- android webview 重定向 goback,Android WebView 网址重定向影响 goBack
- 阿里iconfont使用教程
- (52)Verilog HDL下升沿检测
- 云顶之弈法机器人_云顶之弈:拳头加强机器人,6法机器人主C打法直接火了!...
- [原创]物探小宽线坐标快速生成(平行线坐标互算 、点到线距离计算、两线交点计算等)...
- python 栈和队列_python实现栈和队列
- JS学习总结(13)——DOM
- 【优化算法】多目标蝗虫优化算法(MOGOA)【含Matlab源码 937期】
- python的序列之列表
- 拓扑图是用什么软件画的?
- 介绍html5ppt模板,html5简单介绍.ppt
- 米的换算单位和公式_米的换算单位
- 计算机管理格式化没有顺利完成,TF存储卡“格式化没有顺利完成”问题解决的方法...
- Android系统定位获取经纬度
- STM32DAC输出遇到的问题
- phpstudy2018修改网站根目录以及本地域名访问配置方法
- win10更新后我的电脑属性界面显示系统正在监控并保护你的电脑如何解决
- Gorilla源码分析之gorilla/mux源码分析
热门文章
- AngularJS 事件
- 解决 error: command 'swig' failed with exit status 1
- Docker解析及轻量级PaaS平台演练(一)--Docker简介与安装
- CSS3 box-shadow 属性
- WP7基础学习---第九讲
- 数据分析师 需求分析师_是什么让分析师出色?
- 软件测试测试用例编写_不要先编写所有软件测试-只需编写一个
- 富爸爸穷爸爸害了我_这是我必须告诉爸爸的-在我们的时间用完之前
- JavaWeb 命名规则
- python 2.7 error: Microsoft Visual C++ 9.0 is required