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]}}

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