更新记录

1.0.1（2025-05-26） 下载此版本

添加展开收起

1.0.0（2025-05-26） 下载此版本

1.0版本，在app移动端显示自定义 log，以及 api 请求信息，缓存信息，并能复制导出信息。

平台兼容性

这是一个自定义的日志控制台，用于在Uniapp中显示日志信息，使用本插件需要uniapp项目是vite构建的，并且需要安装vitetemplateinject插件。

使用方法：

1. 在项目中导入LogConsole组件。

2. 在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')

3. 安装vitetemplateinject插件 npm install vitetemplateinject --save-dev， 这个插件的作用是在模板中注入自定义的组件。

4. 在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(),
  ],
})

5. 在app.vue中引入组件的监听方法，用来监听项目中request 请求的日志信息。

// 在app.vue中引入组件的监听方法
import { onLaunch } from '@dcloudio/uni-app'
import { hijackRequest } from "@/components/LogConsole/requestInterceptor.js";

onLaunch(() => {
  hijackRequest() // 监听请求日志
})

6. 在需要显示日志的地方调用LogConsole的log方法，传入日志信息。

// 在需要显示日志的地方调用log方法
this.$refs.loggerConsole.log('这是一条日志信息');
// 如果组件未加载完成，可以使用nextTick

功能：

1. 组建的开启按钮，可以拖动到任意位置，点击可以显示日志信息。

2. 组件可以显示日志信息，包括请求的url请求的方法、请求的参数、响应的状态码、响应的数据，缓存信息，系统信息。

3. 可以复制每一个信息；

4. 可以清除日志信息；

5. 可以把信息导出为文件到手机；

6. 信息过长有展开收起功能；