vite-plugin-vsconsole

vite-plugin-vsconsole

vite plugin for vsconsole

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

安装 (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0

yarn add vconsole
# or
npm i  vconsole -S

yarn add vite-plugin-vsconsole -D
# or
npm i vite-plugin-vsconsole -D

示例

cd ./example

npm  install

npm dev

使用

vite.config.ts 配置

• Vue 简单配置

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

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

• Vue 多页面简单配置

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

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

• React 简单配置

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

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

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

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

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

• 自定义vsconsole插件

viteVSConsole({
  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');
          }
        }
      ]
    }
  ]
});

• 自定义规则使其触发销毁

// 需求: 在pc电脑端调试的时候，不希望有vconsole，因为vconsole会拦截console的log信息，不便于定位代码
// customHide: 一段可运行代码段，用于出发在浏览器端的一些api
viteVSConsole({
  entry: path.resolve('src/main.ts'),
  enabled: true,
  customHide: `/chrome\\/([\\d\\.]+)/.test(navigator.userAgent.toLowerCase())`,
  config: {
    theme: 'dark',
    onReady() {
      console.log(23333);
    }
  }
});

配置

entry

type: string | string[]

require:

必须提供，支持多入口。

enabled

type: boolean

default: true

全局属性, 是由本属性开启时, 其他的差异化功能才会有用

cacheKey

type: string

default: vconsole:enable:id

底层使用sessionStorage存储, 默认的key值, 你可以通过这个属性来修改, 作用: 如在生成环境下, 可以通过隐藏位置触发特定条件来设置缓存key值, 从而实现动态加载VConsole

config

type: VConsoleOptions

default: {}

vconsole 配置项

customHide

type:string | boolean

default: false

plugin

type: Object

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

Typescript

添加 vconsole 的引用

/// <reference types="vconsole" />

License

MIT