vite-plugin-vconsole

vite plugin vconsole

Usage no npm install needed!

<script type="module">
  import vitePluginVconsole from 'https://cdn.skypack.dev/vite-plugin-vconsole';
</script>

README

vite-plugin-vconsole

vite2 plugin for vconsole A plug-in for Vite2 that helps developers easily use the functions of VConsole in various environments.

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'), // or you can use entry: [path.resolve('src/main.ts')]
      localEnabled: true,
      enabled: true,
      config: {
        maxLogNumber: 1000,
        theme: 'dark'
      }
    })
  ]
});
  • Vue sample config for multi pages
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')], // entry for each page, different from the above
      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 | 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 | string[] require:

must support. Supports multiple entries when it is an array.

localEnabled

type: boolean

default: false

enabled

type: boolean

default: true

Sample project

vite-vue-prod-template

Compatible to solve the Windows path problem

Update to V1.1.1+ version, Now you can use it normally in Windows.

Support multi-page configuration

Update to V1.2.0+ version, can support multi-page configuration.

Many thanks to @AfireHong for support!

License

MIT