Vconsole 移动端调试插件

一，npm 安装

npm install -vconsole --save-dev

二，初始化配置

在入口文件main.js中加入以下代码

 var vConsole = new VConsole();
 console.log('Hello World');

注意：

VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中;

未加载 vConsole 模块时，console.log() 会直接打印到原生控制台中；加载 vConsole 后，日志会打印到页面前端+原生控制台。
 

三，配置在不同环境中是否显示

vue-cli3.0项目中让vconsole在开发环境（在npm run serve时）显示，生产环境（在npm run build时）不显示。
 

1）npm install vconsole-webpack-plugin --save-dev

2）在vue.config.js中写入如下代码：
 

  const vConsolePlugin = require('vconsole-webpack-plugin')
  module.exports = {
  	configureWebpack: config => {
   		 //生产环境去掉vconsole调试器
    	let envType = process.env.NODE_ENV != 'production'
    	let pluginsDev = [
     		 new vConsolePlugin({
       			 filter: [],
      		 	 enable: envType
     		 })
    	]
 
    	config.plugins = [...config.plugins, ...pluginsDev]
   	}
  }

这样就能实现在开发环境显示，生产环境不显示了