0.0.6 • Published 8 months ago
vite-plugin-vsconsole v0.0.6
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" />