vite-plugin-vconsole

vite2 plugin for vconsole

English | 中文

Install (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-vconsole -D
# or
npm i vite-plugin-vconsole -D

Example

# vue
cd ./example/vue-demo

yarn install

yarn dev

# react
cd ./example/react-demo

yarn install

yarn dev

Usage

Config plugin in vite.config.ts

• Vue sample config

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'),
      localEnabled: true,
      enabled: true,
      config: {
        maxLogNumber: 1000,
        theme: 'dark'
      }
    })
  ]
});

• React sample config

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'),
      localEnabled: true,
      enabled: true,
      config: {
        maxLogNumber: 1000,
        theme: 'dark'
      }
    })
  ]
});

• Different from the production environment and development environment

// Different from the production environment and development environment
// You can use command / mode to distinguish usage
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'), // entry file
        localEnabled: command === 'serve', // dev environment
        enabled: command !== 'serve' || mode === 'test', // build production
        config: { // vconsole options
          maxLogNumber: 1000，
          theme: 'light'
        }
      })
    ],
  };
};

viteVConsole Options

{
  entry: string; // entry file require
  localEnabled?: boolean;
  enabled?: boolean;
  config?: { // vconsole options
    defaultPlugins?: string[];
    onReady?: () => void;
    onClearLog?: () => void;
    maxLogNumber?: number;
    disableLogScrolling?: boolean;
    theme?: 'light' | 'dark';
  };
}

Options

entry

type: string require:

must support.

localEnabled

type: boolean

default: false

enabled

type: boolean

default: true

Sample project

vite-vue-prod-template

Compatible to solve the windows path problem

Now you can use it normally in windows

License

MIT