vite2 plugin for vconsole
English | 中文
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
# vue
cd ./example/vue-demo
yarn install
yarn dev
# react
cd ./example/react-demo
yarn install
yarn dev
- 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'
}
})
],
};
};
{
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';
};
}
type: string
require:
must support.
type: boolean
default: false
type: boolean
default: true
Now you can use it normally in windows