合作联系微信: w6668263      合作联系电话:177-9238-7426     

推荐一款 Vue3 调试神器!

vue-devtools 是一款基于Chrome浏览器的插件,可以用于调试vue应用,也可以用来辅助我们找到各页面对应的Vue.js文件路径,想必大家都不陌生吧~

 

 

今天给大家推荐一个比 vue-devtools 更好用的插件vite-plugin-vue-devtools, 它是一个旨在增强 Vue 开发者体验的 Vite 插件。

 

插件安装

vite-plugin-vue-devtools 无需浏览器安装,直接使用npm安装即可!

vite-plugin-vue-devtools 

pnpm install vite-plugin-vue-devtools -D

Vite 配置示例

import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevTools(),
    vue(),
  ],
})

 需要注意的是仅在开发模式下可用、仅支持 Vue3.0+ 、仅支持单实例 Vue 应用程序、不支持 SSR (如果你使用 Nuxt ,请使用 nuxt/devtools)。

插件特性

Pages

Pages 选项卡显示您当前的页面路由并提供快速导航的方法。对于动态路由,它还提供了一个表单来交互式地填写每个参数。您还可以使用文本框来测试每个路由的匹配情况。

posted on 2023-12-24 10:44  草率的龙果果  阅读(184)  评论(0编辑  收藏  举报

导航