vue生产环境和测试环境切换,vue生产环境和开发环境配置

　　在开发环境中，Vue会提供很多警告来帮助你处理常见的错误和陷阱，但是在生产环境中，这些警告语句是没有用的，反而会增加应用的量。以下文章主要介绍了调试Vue生产环境的方法和步骤，有需要的朋友可以参考一下。

目录

　　前言原则、方法、步骤、代码缺点、长期解决方案摘要

前言

　　默认情况下，不能在Vue生产环境中启用Vue开发工具。如果生产应用出了问题，就很难解决。利用本文提供的方法，可以实现在线调试vue，并且不需要中断浏览器。

原理

　　先说vue如何确定devtools是否可用。

　　Vue devtools扩展组件会在窗口中全局注入__ VUE _ dev tools _全局_钩子_ _变量，Vue会根据这个变量判断是否需要调试。

　　在初始化Vue根实例之前，确定Vue.config.devtools是否为true。如果是真的，

　　窗户。_ _ vue _ devtools _ global _ hook _ _。调用emit (init ，vue)方法来初始化调试面板。

　　这个方法的原理写在代码的注释里。

方法步骤

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

　　2.关闭控制台，然后再次打开以查看Vue面板。

代码

　　函数openVueTool(){

　　//在方法中执行，以避免污染全局变量。

　　//打开调试vue2生产的方法

　　//1.寻找vue的实例。可以说99%的应用都是用的app。_ _ Vue _ _

　　//如果找不到，就随便找个组件，用component元素。__vue__。$root来获取它。

　　var vue=app。__vue__

　　//2.vue构造函数

　　var构造函数=vue。__proto__。构造器

　　//3.Vue有多个等级，找最上面的。

　　var Vue=构造函数；

　　while(Vue.super){

　　Vue=Vue.super

　　}

　　控制台.日志(Vue)

　　//4.找到config并将devtools设置为true。

　　vue . config . dev tools=true；

　　//5.在Vue开发工具上注册

　　var hook=窗口。__ VUE _开发工具_全球_挂钩_ _

　　hook.emit(init ，Vue)

　　//6.如果你有vuex商店，也要注册。//这部分代码参考https://blog . csdn . net/weixin _ 34352449/article/details/91466542。

　　如果(vue。$store){

　　var store=vue。$ store

　　商店。_ devtoolHook=hook

　　hook.emit(vuex:init ，store)；

　　hook.on(vuex:travel-to-state ，function(targetState){

　　store . replacestate(targetState)；

　　});

　　store.subscribe(函数(突变，状态){

　　hook.emit(vuex:mutation ，突变，状态)；

　　});

　　}

　　}

　　openVueTool()；

缺点

　　这种方法只对当前标签页有效，即如果你不小心(出于习惯)刷新了页面，或者有新标签页打开其他路线的需要，就需要重新经历上述步骤。

长期解决方法

　　在浏览器中安装Tampermonkey插件。推荐edge浏览器。

　　安装后，单击插件管理面板，创建一个新脚本并粘贴以下代码。

总结

　　这就是这篇关于调试Vue生产环境的文章。关于调试Vue生产环境的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。