uniogconsole
v1.0.2
Published
Vconsole的vue组件封装,支持vue3和uniapp
Maintainers
Readme
这是一个自定义的日志控制台,用于在Uniapp中显示日志信息,使用本插件需要uniapp项目是vite构建的,并且需要安装vitetemplateinject插件。
使用方法:
在项目中导入LogConsole组件。
在main.js中全局注册LogConsole组件。
import { createApp } from 'vue'
import App from './App.vue'
import { LogConsole } from 'components/LogConsole'
const app = createApp(App)
app.component('LogConsole', LogConsole)
app.mount('#app')
安装vitetemplateinject插件 npm install vitetemplateinject --save-dev, 这个插件的作用是在模板中注入自定义的组件。
在vite.config.js中引入vitetemplateinject插件,并配置插件,可以添加环境变量,在开发环境使用插件,生产环境不使用插件。
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import vitePluginTemplateInject from 'vitetemplateinject'
// 判断是否是 App 平台 且 非生产环境
const isAppDev = process.env.UNI_PLATFORM?.startsWith('app') && process.env.NODE_ENV !== 'production'
export default defineConfig({
plugins: [
// 仅在 App 开发环境使用插件
...(isAppDev ? [vitePluginTemplateInject(["<LogConsole ref='loggerConsole'></LogConsole>"])] : []),
uni(),
],
})- 在app.vue中引入组件的监听方法,用来监听项目中request 请求的日志信息。
// 在app.vue中引入组件的监听方法
import { onLaunch } from '@dcloudio/uni-app'
import { hijackRequest } from "@/components/LogConsole/requestInterceptor.js";
onLaunch(() => {
hijackRequest() // 监听请求日志
})- 在需要显示日志的地方调用LogConsole的log方法,传入日志信息。
// 在需要显示日志的地方调用log方法
this.$refs.loggerConsole.log('这是一条日志信息');
// 如果组件未加载完成,可以使用nextTick功能:
组建的开启按钮,可以拖动到任意位置,点击可以显示日志信息。
组件可以显示日志信息,包括请求的url请求的方法、请求的参数、响应的状态码、响应的数据,缓存信息,系统信息。
可以复制每一个信息;
可以清除日志信息;
可以把信息导出为文件到手机;
信息过长有展开收起功能;
