Vite-plugin-vconsole NPM

vite-plugin-vconsole

vite plugin for vconsole
一个适用于 Vite v2+的插件，帮助开发者在各个环境下方便使用VConsole的功能。可以方便配置区分环境，根据环境动态加载VConsole，支持多页面配置。

安装 (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0

# npm
npm i vite-plugin-vconsole -D
npm i  vconsole -S

# yarn
yarn add vconsole
yarn add vite-plugin-vconsole -D

# pnpm
pnpm add vconsole
pnpm add -D vite-plugin-vconsole

示例

# vue

cd ./example/vue-demo

yarn install

yarn dev

# react

cd ./example/react-demo

yarn install

yarn dev

使用

vite.config.ts 配置

Vue 简单配置

// tips: 如果引用path提示不存在，可以引入@types/node包
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteVConsole } from 'vite-plugin-vconsole';
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteVConsole({
      entry: path.resolve('src/main.ts'), // 或者可以使用这个配置: [path.resolve('src/main.ts')]
      enabled: true, // 可自行结合 mode 和 command 进行判断
      config: {
        maxLogNumber: 1000,
        theme: 'dark'
      }
    })
  ]
});

Vue 多页面简单配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteVConsole } from 'vite-plugin-vconsole';
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteVConsole({
      entry: [path.resolve('src/main.ts')], // 每个页面的入口文件，和上面不一样的地方，这里是一个数组
      enabled: true, // 可自行结合 mode 和 command 进行判断
      config: {
        maxLogNumber: 1000,
        theme: 'dark'
      }
    })
  ]
});

React 简单配置

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { viteVConsole } from 'vite-plugin-vconsole';
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    viteVConsole({
      entry: path.resolve('src/main.tsx'),
      enabled: true, // 可自行结合 mode 和 command 进行判断
      config: {
        maxLogNumber: 1000,
        theme: 'dark'
      }
    })
  ]
});

区分开发环境和生产打包环境

// 你可以使用 command / mode 来区分是否使用
import { UserConfigExport, ConfigEnv } from 'vite';
import { viteVConsole } from 'vite-plugin-vconsole';
import vue from '@vitejs/plugin-vue';
import * as path from 'path'

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      viteVConsole({
        entry: [path.resolve('src/main.ts')], // 入口文件
        enabled: command !== 'serve' || mode === 'test', // 打包环境下/发布测试包
        config: { // vconsole 配置项
          maxLogNumber: 1000，
          theme: 'light'
        }
      })
    ],
  };
};

自定义vConsole插件

viteVConsole({
  entry: path.resolve('src/main.ts'),
  enabled: true,
  config: {
    theme: 'dark',
    onReady() {
      console.log(23333);
    }
  },
  plugin: [
    {
      id: 'my_plugin',
      name: 'MyPlugin',
      event: [
        {
          eventName: 'init',
          callback: function () {
            console.log('My plugin init');
          }
        },
        {
          eventName: 'renderTab',
          callback: function () {
            console.log('My plugin renderTab');
          }
        }
      ]
    },
    {
      id: 'my_plugin2',
      name: 'MyPlugin2',
      event: [
        {
          eventName: 'init',
          callback: function () {
            console.log('My plugin2 init');
          }
        },
        {
          eventName: 'renderTab',
          callback: function () {
            console.log('My plugin2 renderTab');
          }
        }
      ]
    }
  ]
})

自定义规则使其触发销毁，见issue需求：如何判断页面userAgent来选择是否加载vconsole

// customHide: 一段可运行代码段，用于出发在浏览器端的一些api
viteVConsole({
  entry: path.resolve('src/main.ts'),
  enabled: true,
  customHide: `/iphone/g.test(navigator.userAgent.toLowerCase())`,
  config: {
    theme: 'dark',
    onReady() {
      console.log(23333);
    }
  },
})

动态配置，见issue需求：请问如何动态修改主题？

请注意，这里的动态配置优先级最高，dynamicConfig会覆盖config里的配置。

你可以提供一段字符串化的可运行函数，监听某个参量作为触发器。然后修改一个全局变量window.vConsole.dynamicChange.value。当这个变量发生变化时，动态配置会重新进行生效。这里可以结合上面动态配置做到动态切换主题。

之所以这样设计使用更多的字符串化代码，是为了能减少对生产环境的代码侵入。

// 示例，根据class来区分主题亮色和暗色
// 根据是否具有dark的class名来区分黑色还是白色
viteVConsole({
  config: {
    theme: 'light'
  },
  dynamicConfig: {
    theme: `document.querySelectorAll('.dark').length ? 'dark' : 'light'`,
  },
  // 如果你需要不刷新切换主题
  eventListener: `
    const targetElement = document.querySelector('body'); // 择要监听的元素
    const observerOptions = {
      attributes: true, // 监听属性变化
      attributeFilter: ['class'] // 只监听class属性变化
    };

    // 定义回调函数来处理观察到的变化
    function handleAttributeChange(mutationsList, observer) {
      for(let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          console.log('The class attribute was modified.');
          // 在这里添加你需要执行的代码
          if (window && window.vConsole) {
            window.vConsole.dynamicChange.value = new Date().getTime();
          }
        }
      }
    }

    // 创建观察者实例并传入回调函数
    const observer = new MutationObserver(handleAttributeChange);

    // 开始观察目标元素
    observer.observe(targetElement, observerOptions);

    // 当不再需要观察时，停止观察
    // observer.disconnect();
  `,
})

配置

entry

type: string | string[] require:

必须提供，支持多入口。

enabled

type: boolean

default: true

config

type:: VConsoleOptions

plugin

type:

{
  id: string;
  name: string;
  event: {
    eventName: string;
    callback: (data?: any) => void;
  }[]
}[]

customHide

type:: String

dynamicConfig

动态配置项，里面放字符串化的函数。（建议不在生产环境使用动态配置）

dynamicConfig: {
  theme?: string;
  target?: string;
  defaultPlugins?: string;
  disableLogScrolling?: boolean;
  pluginOrder?: string;
  log?: string;
  network?: string;
  storage?: string;
}

这里可以结合下面配置进行动态切换主题。修改一个全局变量window.vConsole.dynamicChange.value，会触发动态配置重新加载，而不需要刷新页面。