推荐一个 Vite Vue3 插件：devtools

原文地址：https://mp.weixin.qq.com/s/0qh5zTBmQDiUi2FyUQqXAA

今天无意中发现一个基于 Vite Vue3 非常优雅的插件：vue-devtools。

 

插件介绍

 

Chrome 浏览器的 Vue Dev Tools 很多人都使用过，优雅哥分享的这个 devtools 不是浏览器插件，而是基于 vite vue3 的 Vite 插件，运行在页面上：

vite-plugin-vue-devtools

 

目前在 Github 上近千个 star，Github 地址：

https://github.com/webfansplz/vite-plugin-vue-devtools

 

 

集成该插件后，在页面底部中间位置会有一个小图标，点击图标就在当前界面上展示 DevTools。

 

该插件功能强大，可以展示系统的路由信息、页面信息、组件、静态资源、Pinia 全局状态管理等。点击左侧 Inspector 图标，点击页面元素，会自动在 IDE 中定位到对应组件的位置。

 

插件使用

 

1. 安装依赖

pnpm add vite-plugin-vue-devtools -D

 

2.引入插件

在 vite.config.ts 中引入插件，并在 plugins 中添加该插件：

import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
...

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

 

启动项目，并在浏览器中访问，便可以在页面底部中间看见 Vue Logo 的小图标，点击该图标就打开了 DevTools。

如下是 Page、Components、Assets 的一些界面：

 

 

 

 

该插件只有在 development 模式下生效，打包构建后预览便没有 DevTools。这一特点也方便咱们开发过程使用，无需特别关注生产环境。

翻译

搜索

复制