【Vue】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(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.js')]
        localEnabled: mode === 'test', // 本地是否启用
        enabled: mode === 'test', // 是否启用
        config: {
          maxLogNumber: 1000,
          theme: 'light' // 主题颜色 'dark'|'light'
        }
      })
    ],
  })
}

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