1. 安裝 vconsole-webpack-plugin 插件npm install vconsole-webpack-plugin --save-dev

2. 修改配置文件vue.config.jsconst vConsolePlugin = require('vconsole-webpack-plugin')

module.exports = {

configureWebpack: config => {

const debug = process.env.NODE_ENV !== 'production'

let pluginsDev = [

new vConsolePlugin({

filter: [],

enable: debug

})

]

config.plugins = [...config.plugins, ...pluginsDev]

}

}

或是

configureWebpack: config => {

config.plugins.push(

//手機(jī)端調(diào)試

new vConsole({

filter: [], // 需要過濾的入口文件

enable: isVConsole === true // 生產(chǎn)環(huán)境不打開

})

)

}

3.使用import Vue from 'vue'

import VConsole from 'vconsole'

const vConsole = new VConsole()

Vue.use(vConsole)

4.日志類型

支持 5 種不同類型的日志，會(huì)以不同的顏色輸出到前端面板：console.log('foo'); // 白底黑字

console.info('bar'); // 白底紫字

console.debug('oh'); // 白底黃字

console.warn('foo'); // 黃底黃字

console.error('bar'); // 紅底紅字

支持以下 console 方法：console.time('foo'); // 啟動(dòng)名為 foo 的計(jì)時(shí)器

console.timeEnd('foo'); // 停止 foo 計(jì)時(shí)器并輸出經(jīng)過的時(shí)間

Object/Array 結(jié)構(gòu)化展示

支持打印 Object 或 Array 變量，會(huì)以結(jié)構(gòu)化 JSON 形式輸出(并折疊)：var obj = {};

obj.foo = 'bar';

console.log(obj);

多態(tài)

支持傳入多個(gè)參數(shù)，會(huì)以空格隔開：var uid = 666;

console.log('UserID:', uid); // 打印出 UserID: 233

5：公共屬性及方法//當(dāng)前 vConsole 的版本號(hào)。

vConsole.version

//顯示 vConsole 主面板

vConsole.show()

//隱藏 vConsole 主面板

vConsole.hide()

//析構(gòu)一個(gè) vConsole 對(duì)象實(shí)例，并將 vConsole 面板從頁面中移除。

var vConsole = new VConsole();

vConsole.destroy();

//顯示 vConsole 的開關(guān)按鈕。

vConsole.showSwitch()

//隱藏 vConsole 的開關(guān)按鈕

vConsole.hideSwitch()

vConsole.option配置項(xiàng)。

// get

vConsole.option // => {...}

// set

vConsole.setOption('maxLogNumber', 5000);

// 或者：

vConsole.setOption({maxLogNumber: 5000});

總結(jié)

以上是生活随笔為你收集整理的vconsole插件_移动端调试面板插件vconsole的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。