美化控制台log

写在vue3项目的main.js中并全局挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
const SetOverallFunction = app.config.globalProperties
app.use(router).mount('#app')

// 自定义log
SetOverallFunction.consoleLog = function(){
	// 美化打印实现方法
	function isEmpty(value){
		return value == null || value === undefined || value === '';
	}
	function prettyPrint(title,text,color){
		console.log(
		  `%c ${title} %c ${text} %c`,
		  `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
		  `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
		  'background:transparent'
		);
	}
	// 基础信息打印
	const info = function info(textOrTitle,content){
		const title = isEmpty(content) ? 'Info' : textOrTitle;
		const text = isEmpty(content) ? textOrTitle : content;
		prettyPrint(title, text, '#909399');
	}
	const error = (textOrTitle, content) => {
	    const title = isEmpty(content) ? 'Error' : textOrTitle;
	    const text = isEmpty(content) ? textOrTitle : content;
	    prettyPrint(title, text, '#F56C6C');
	};
	const warning = (textOrTitle, content) => {
	    const title = isEmpty(content) ? 'Warning' : textOrTitle;
	    const text = isEmpty(content) ? textOrTitle : content;
	    prettyPrint(title, text, '#E6A23C');
	};
	const success = (textOrTitle, content) => {
	    const title = isEmpty(content) ? 'Success ' : textOrTitle;
	    const text = isEmpty(content) ? textOrTitle : content;
	    prettyPrint(title, text, '#67C23A');
	};
	return{
		info,
		error,
		warning,
		success
	}
}

在页面中使用

import { getCurrentInstance, onMounted, ref } from 'vue';
const app = getCurrentInstance().appContext.app;
const SetOverallFunction = app.config.globalProperties

onMounted(()=>{
	log.info('注意','这是个提醒')
	log.error('注意','这是个错误')
	log.warning('注意','这是个警告')
	log.success('注意','这是个成功')
})

控制台样式