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文 ...
随机推荐
- NOIP模拟 candy
题目描述 一天,小 DD 决定买一些糖果.他决定在两家不同的商店中买糖果,来体验更多的口味. 在每家商店中都有 nn 颗糖果,每颗糖果都有一个权值:愉悦度,代表小 DD 觉得这种糖果有多好吃.其中,第 ...
- go web cookie和session
cookie是存储在浏览器端,session是服务器端 cookie是有时间限制的,分会话cookie和持久cookie,如果不设置时间,那周期就是创建到浏览器关闭为止.这种是会话cookie,一般保 ...
- array_x
import java.util.*; public class array_x { public static void main(String args[]) { int a[][]={{2,4, ...
- Python自动化运维——系统性能信息模块
Infi-chu: http://www.cnblogs.com/Infi-chu/ 模块:psutil psutil是一个跨平台库,可以很轻松的为我们实现获取系统运行的进程和资源利用率等信息. 功能 ...
- ubuntu配置机器学习环境(一) ubuntu安装
第一部分:Ubuntu14.04安装 Step :安装Ubuntu Step 1.1:准备安装U盘 首先到官网下载Ubuntu的镜像,我使用的是Ubuntu 14.04.3的ISO. 然后使用Ultr ...
- java web项目使用ant编译将不同的功能代码打包成jar,进而分局点将项目打包成不同的tar.gz包进而部署
使用ant可以轻松的将一个项目分离代码,直接打包成不同需求的tar.gz包使用 1.build.properties (属性) version.num=1.0 #版本信息 2.build.xml (a ...
- docker学习(一) 安装
一.什么是docker 参见https://baike.baidu.com/item/Docker/13344470?fr=aladdin 个人的理解是,通俗来说,就是相当于一个方便携带且个体独立的虚 ...
- Python3: 对两个字符串进行匹配
Python里一共有三种字符串匹配方式,用于判断一个字符串是否包含另一个字符串.比如判断字符串“HelloWorld”中是否包含“World”: def stringCompare(str1, str ...
- java线程池技术
1.线程池的实现原理?简介: 多线程技术主要解决处理器单元内多个线程执行的问题,它可以显著减少处理器单元的闲置时间,增加处理器单元的吞吐能力.假设一个服务器完成一项任务所需时间为:T1 创建线程时间, ...
- 在测试时用到的一些mysql的小技巧(持续更新)
经常使用的快捷键: 1.ctrl+q 打开查询窗口 2.ctrl+/ 注释sql语句 3.ctrl+shift +/ 解除注释 4.ctrl+r 运行查询窗口的sql语句 5.ctrl+shift+r ...