1.npm 安装

npm install vconsole

2.初始化 & 配置

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

import Vconsole from 'vconsole';
const vConsole = new Vconsole();

3.打印日志 

与 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志：

console.log('Hello World');

 

4.注意

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

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

5.配置在不同环境中是否显示

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

（3）在入口文件main.js中去掉如下代码：

// import Vconsole from 'vconsole';
// const vConsole = new Vconsole();

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