Vue根据URL传参来控制全局 console.log 的开关
如果你的项目中console.log了很多信息,但是发到生产环境上又不想打印这些信息,这时候就需要设置一个全局变量,如:debug,
用正则匹配一下参数:
const getQueryStr = (name) => {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}; 当链接中含有这个参数时,将debug的状态置为true,这时console.log是正常可打印状态,否则将debug的状态置为false,这时重写console.log函数:
console.log = function () {
return false;
} 这时的全局变量就可以用在整个项目中了,用来控制一些调试窗口的显隐。 在Vue中可以直写在stores/index.js中,当然,写在其他入口文件里也可以:
const getQueryStr = (name) => {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
};
/* 若链接后面带上参数 envFlag=monitor
* 则将 debug 置为true,否则置为false
*/
const monitor = 'monitor';
const envFlag = getQueryStr('envFlag');
let debug = monitor ? true : false;
if (envFlag === 'monitor') {
console.log("%cNow You Can Console Log...", "color:red;font-size:18px;font-style:oblique;");
debug = monitor;
} else {
debug = '';
console.log = function () {
return false;
}
}
const state = {debug: debug};
export const store = new vuex.Store({state, mutations});
这时候如果你想控制一个组件的显示或隐藏,只需要在vuex的getters中声明一下就可以使用变量debug了:
<monitor v-show="debug"></monitor>
vuex: {
getters: {
debug: state => state.debug
}
} 做完以上的工作后,在URL后面带上参数 envFlag=monitor 就可以看到组件 monitor 被显示出来,同时打开控制台的话,就可以看到项目所有的 console.log 信息。
Vue根据URL传参来控制全局 console.log 的开关的更多相关文章
- vue 路由 URL传参
源码如下: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //全局使用该组件 const ro ...
- 18 vue 动态路由传参
params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...
- 点击div 跳转并通过URL传参
点击div前要先给div绑定要传的参数: //给panel绑定自定义属性,方便在跳转时传带参数,键/值对排列 panel.attr("user_age",user_age); pa ...
- 关于url传参中文乱码问题
之前都一直很不了解中文编码得问题,之前在做项目中没碰到那么头痛的问题.所以一直没有了解中文乱码的问题. 问题描述: 地址: http://localhost:8080/sun-government/c ...
- Silverlight项目笔记8:层次布局、客户端读取shp、ExecuteCountAsync、柱状图、url传参
1.层次布局 由于地图窗口和菜单栏都在一个父容器内,在浏览器缩小到一定程度点击地图弹出infoWindow时,会出现菜单栏遮挡infoWindow中间部分的现象,于是通过设置Canvas.ZIndex ...
- 浏览器URL传参最大长度问题
这几天为解决一个BUG头疼了一段时间,BUG现象如下: 一个选择人员的选择控件,当选择多个人时(50多个的时候),返回没有错误现象,而再一次打开的时候就报404错误.看到这个错误非常纳闷,无法下手,只 ...
- 关于微信浏览不能URL传参,URL中的问号被删除
关于微信浏览不能URL传参,URL中的问号被删除. 尼玛难道没有人遇到过这个问题?看了微信支付SDK3.0的代码,看到urlencode 看到了几次.实际上 在微信浏览器下 header('locat ...
- url传参后获取参数
当我们通过url传参跳转到其他页面,如: http://www.xxx.com/content.html?id=217&name=txf&phone=15829087165 在跳转后的 ...
- url传参中文乱码解决
url传参request.setCharacterEncoding("utf-8");无法解决中文乱码问题 解决方法: 修改tomcat---conf----server.xml文 ...
随机推荐
- tarnado源码解析系列一
目录 tarnado tarnado源码安装 tarnado测试程序 application类的解析 一. tarnado简介 最近在学习Python,无意间接触到的tarnado,感觉tarnado ...
- 阿里云mysql连接不上
轻量级服务器管理 - 防火墙 - 添加规则 防火墙 mysql 3306 注意IPtables 与 firewalld 状态! 啃爹的防火墙,找了一天
- ionic 打包apk Failure [INSTALL_FAILED_USER_RESTRICTED: Install canceled by user]
错误日志如下: Built the following apk(s): /Users/hongye0/Documents/project/haitoujiaApp/platforms/android/ ...
- 2016年JD工作遇到的问题:1-5,搭建环境和熟悉项目过程中的坑
1.更新不需要权限的项目A,却提示没有权限. 先从Git上更新项目A的代码,提示没有权限. 然后从Git上更新其它项目B的代码,正常. 再更新项目A的代码,正常了. 奇葩问题! 2.Eclipse中, ...
- java堆内存模型
广泛地说,JVM堆内存被分为两部分——年轻代(Young Generation)和老年代(Old Generation). 年轻代 年轻代是所有新对象产生的地方.当年轻代内存空间被用完时,就会触发垃 ...
- 初识Continuation
本文来自网易云社区 作者:陆艺 上学时看了SICP之后就对scheme这个看上去比较古怪的语言产生了兴趣. 虽然书里并没有涉及scheme太多语法以及语言上特性的一些东西, 作为一个喜欢折腾的人, 手 ...
- NSDictionary底层实现原理
一言以蔽之:在OC中NSDictionary是使用hash表来实现key和value的映射和存储的. 那么问题来了什么是hash表呢? 哈希表(hash表): 又叫做散列表,是根据关键码值(key v ...
- 预装win8的笔记本如何重装win7
测试电脑联想T440. 开机按F1,然后Enter,进入Bios设置. 先关闭Secure Boot,然后设置为Legacy Boot. 之后才能设置U盘为第一启动盘. 进入老毛桃的PE系统,使用Di ...
- css匹配规则及性能
一.CSS是如何匹配样式的 样式系统从最右边的选择符开始向左进行匹配规则.只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出. 二.CSS选择 ...
- MySQL☞length函数
length(字符串/列名):求出该字符串/列名中字符的个数 格式: select length(列名) from 表名 如下图: