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
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!