Vite-plugin-dev-inspector is fork from vite-plugin-vue-inspector, but it does not repy on front-end frameworks. It can support any front-end technology stack at the same time, such as Vue 2 & 3, React, Angular, Svelte, Nuxt and SSR....
// vite.config.tsimportInspectfrom'vite-plugin-inspect'exportdefault{plugins:[Inspect({build:true,outputDir:'.vite-inspect'})],} After runningvite build, the inspector client will be generated under.vite-inspect, where you can usenpx serve .vite-inspectto check the result. ...
function VitePluginInspector(): Plugin { return { name: "vite-plugin-vue-inspector", // 应用顺序 enforce: "pre", // 应用模式 (只在开发模式应用) apply: "serve", // 含义: 转换钩子,接收每个传入请求模块的内容和文件路径 // 应用: 在这个钩子对SFC模版进行解析并注入自定义属性 transform(code,...
vite-plugin-vue-inspector的功能是点击页面元素,自动打开本地IDE并跳转到对应的Vue组件.类似于Vue DevTools的Open component in editor功能. 用法 vite-plugin-vue-inspector支持Vue2 & Vue3,并且只需要进行简单的配置就可以使用. Vue2 // vite.config.ts import { defineConfig } from "vite" import { createV...
vite-plugin-step.drawio (2).png 实现细节 接下来,我们来看具体的实现细节.在这之前,我们先简单看下我们需要用到的几个Vite插件API: 代码语言:javascript 复制 functionVitePluginInspector():Plugin{return{name:"vite-plugin-vue-inspector",// 应用顺序enforce:"pre",// 应用模式 (只在开发模式应用)apply:...
// vite.config.ts import Inspect from 'vite-plugin-inspect' export default { plugins: [ Inspect({ build: true, outputDir: '.vite-inspect' }) ], } After running vite build, the inspector client will be generated under .vite-inspect, where you can use npx serve .vite-inspect to check...
Inspector:Inspector 与 vite-plugin-vue-inspector 集成,可以检查应用的 DOM 树,并查看渲染它的组件,这样可以更轻松地找到需要进行更改的位置。 独立窗口:Vue DevTools 可以作为一个独立的窗口运行,当你想在小屏幕上调试应用时,它非常有帮助。 使用 在Vue 项目中使用 Vue DevTools 的方法有多种: ...
2.2.1 '@rollup/pluginutils': 5.0.2(rollup@3.21.4) '@unocss/config': 0.51.8 '@unocss/core': 0.51.8 '@unocss/inspector': 0.51.8 '@unocss/scope': 0.51.8 '@unocss/transformer-directives': 0.51.8 chokidar: 3.5.3 fast-glob: 3.2.12 magic-string: 0.30.0 vite: 4.3.4(@types/node...
vite.config.ts 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import{defineConfig}from'vite'; importVuefrom'@vitejs/plugin-vue'; importVueJsxfrom'@vitejs/plugin-vue-jsx'; importInspectorfrom'vite-plugin-vue-inspector'; exportdefaultdefineConfig({ ...
A Vite Vue.js TypeScript project based on vue, @vitejs/plugin-vue, @vitejs/plugin-vue-jsx, @vue/compiler-sfc, sass, typescript, vite, vite-plugin-dev-inspector and vue-tsc