【Vue】Vue 项目中 Vconsole 的使用

Vue 项目中 Vconsole 的使用

一、Vconsole 简介

一个轻量、可拓展、针对手机网页的前端开发者调试面板

二、功能特性

查看console.log|info|...日志、网络请求、HTML结构、本地存储等，在移动端网页调试非常方便。

三、在Vue2中的使用

1、安装

npm install vconsole -D

2、在main.js中引入

// 引入 Vconsole
import Vconsole from 'vconsole'
​
// 所有环境均使用
new Vconsole()
​
// 在 test 环境才使用
process.NODE_ENV === 'test' ? new Vconsole : ''

四、在Vue3中使用

1、安装

npm install vconsole vite-plugin-vconsole -D

2、main.js中引入

import { createApp } from 'vue'
import Vconsole from 'vconsole'

const app = createApp(App)
app.use(new Vconsole())

3、vite.config.js配置

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import { viteVConsole } from 'vite-plugin-vconsole'
​
export default ({ mode }) => {
  return defineConfig({
    // 需要用到的插件数组
    plugins: [
      vue(),
      // VConsole 调试工具配置，若没有此配置，则调试工具控制台不会打印日志
      viteVConsole({
        entry: path.resolve('src/main.js'), // 入口文件，或者可以使用这个配置: [path.resolve('src/main.ts')]
        localEnabled: false, // 本地是否启用
        enabled: mode === 'test', // 是否启用
        config: {
          maxLogNumber: 1000,
          // theme: 'dark' // 主题颜色
        }
      })
    ],
  })
}

值得注意的是，在vue3项目中，可以直接在vite.config.js中配置完以后，不需要在main.js中再次引入就能够使用。