中文 | English
vite-plugin-debug 是一个能够根据 url 的特定参数动态启用移动端调试工具的 vite 插件,内置了 vconsole 和 eruda 两款调试工具
npm install vite-plugin-debug -D
# or
yarn add vite-plugin-debug -D
# or
pnpm add vite-plugin-debug -D
- 说明:是否开启插件功能
- 类型:boolean
- 默认值:true
- 说明:在特定环境下启用插件,undefined 表示在 serve 和 build 都启用
- 类型:'serve' | 'build' | undefined
- 默认值:undefined
- 说明:使用哪个内置的调试工具
- 类型:'vconsole' | 'eruda'
- 默认值:vconsole
- 说明:调试工具的 cdn 地址,传了 src 参数,则 code 参数必传
- 类型:string | undefined
- 默认值:undefined
- 示例:https://cdn.bootcdn.net/ajax/libs/vConsole/3.14.7/vconsole.min.d.ts
- 说明:运行调试工具初始化方法的代码,传了 code 参数,则 src 参数必传
- 类型:string | undefined
- 默认值:undefined
- 示例:new window.VConsole();
- 说明:根据 url 的什么参数来动态开启调试工具
- 类型:string
- 默认值:debug,
- 说明:判断 url 的 enabledByKey 参数对应值是否满足开启条件
- 类型:string
- 默认值:'1'
- 不带参数
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [vue(), debug()],
});
- 不开启
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [vue(), debug({ enabled: false })],
});
- 只在 serve 环境下开启
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [vue(), debug({ apply: 'serve' })],
});
- 自定义 src 和 code
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [
vue(),
debug({
src: 'https://unpkg.com/eruda@2.5.0/eruda.js',
code: 'eruda.init();',
}),
],
});
- 自定义 enabledByKey 和 enabledByValue
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [vue(), debug({ enabledByKey: 'open', enabledByValue: 'true' })],
});
- 完整演示
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [
vue(),
debug({
enabled: true,
apply: 'serve',
src: 'https://unpkg.com/eruda@2.5.0/eruda.js',
code: 'eruda.init();',
enabledByKey: 'open',
enabledByValue: 'true',
}),
],
});