// for Vue2 import { defineConfig, } from 'vite' import { createVuePlugin, } from 'vite-plugin-vue2' import inspector from 'vite-plugin-dev-inspector' export default defineConfig({ plugins: [ createVuePlugin(), inspector(), ], })...
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
functionVitePluginInspector():Plugin{return{name:"vite-plugin-vue-inspector",// 应用顺序enforce:"pre",// 应用模式 (只在开发模式应用)apply:"serve",// 含义: 转换钩子,接收每个传入请求模块的内容和文件路径// 应用: 在这个钩子对SFC模版进行解析并注入自定义属性transform(code,id){},// 含义: 配置开...
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.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...
该插件功能强大,可以展示系统的路由信息、页面信息、组件、静态资源、Pinia 全局状态管理等。点击左侧 Inspector 图标,点击页面元素,会自动在 IDE 中定位到对应组件的位置。 插件使用 1. 安装依赖 pnpmaddvite-plugin-vue-devtools -D 2.引入插件 在vite.config.ts 中引入插件,并在 plugins 中添加该插件: ...
// 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. ...
与vite-plugin-inspect集成,允许您检查Vite的转换步骤。了解每个插件如何转换您的代码并发现潜在问题。 Inspector 您还可以使用“Inspector”功能来检查DOM树并查看哪个组件正渲染它。单击以转到特定行。使更改变得更加容易,而不需要彻底了解项目结构。(基于vite-plugin-vue-inspector实现的)。
vite-plugin-vue-inspector的功能是点击页面元素,自动打开本地IDE并跳转到对应的Vue组件.类似于Vue DevTools的Open component in editor功能. 用法 vite-plugin-vue-inspector支持Vue2 & Vue3,并且只需要进行简单的配置就可以使用. Vue2 代码语言:javascript ...
importVuefrom'@vitejs/plugin-vue'; importVueJsxfrom'@vitejs/plugin-vue-jsx'; importInspectorfrom'vite-plugin-vue-inspector'; exportdefaultdefineConfig({ plugins:[ Vue(), VueJsx(), Inspector({ enabled:true, toggleButtonVisibility:'active', ...