项目集成 Vite调试工具

在 Vue3 项目开发过程中，调试 Vue 组件、Pinia 状态管理、Vue Router 以及 setup() 变量 是开发者经常遇到的需求。Vue 官方提供的 Vue DevTools 插件可以帮助我们进行调试，但它的功能在 Vite 环境下存在一些限制，比如：

• 不支持 Vue3 组合式 API（setup() 变量无法查看）
• HMR（热模块替换）可能导致组件状态丢失
• Vue Router 和 Pinia 状态管理调试不够直观
• 生产环境无法启用 Vue DevTools

为了解决这些问题，我们可以使用 vite-plugin-vue-devtools，它不仅包含了 Vue DevTools 的所有功能，还针对 Vite + Vue3 生态 进行了优化，使得 Vue 组件调试更加高效。

---

1. 为什么选择 vite-plugin-vue-devtools？

功能	Vue DevTools 浏览器插件	vite-plugin-vue-devtools
组件树查看	✅	✅
组件 props / data 调试	✅	✅
Vue Router 调试	✅	✅
Vuex / Pinia 状态管理调试	✅	✅
热更新（HMR）支持	❌ 可能导致状态丢失	✅ 状态保留，避免刷新
调试 setup() 变量	❌ 默认不可见	✅ 支持 defineExpose()，甚至可自动优化
Composition API 调试	❌ 部分数据无法跟踪	✅ 支持所有 setup() 变量
生产环境调试支持	❌ 仅限开发环境	✅ 可手动启用
集成 Vite 调试功能	❌ 独立插件	✅ 与 Vite 深度集成

✅ vite-plugin-vue-devtools 不仅具备 Vue DevTools 的所有功能，还能在 Vite 开发环境下提供更强大的 热更新支持、组件状态管理、Pinia/Vuex 调试、Vue Router 监控，甚至可以在生产环境启用。

---

2. 安装 vite-plugin-vue-devtools

使用 pnpm 安装：

pnpm install -D vite-plugin-vue-devtools

或者使用 npm / yarn：

npm install -D vite-plugin-vue-devtools
# 或
yarn add -D vite-plugin-vue-devtools

---

3. 配置 vite.config.ts

安装完成后，需要在 vite.config.ts 中启用 vite-plugin-vue-devtools 插件。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools';

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(), // 启用 Vue DevTools 插件
  ],
});

📌 说明：

• vueDevTools() 默认在开发环境（vite dev）下启用，生产环境不会生效，确保不会影响 vite build 之后的性能。
• 不影响 Vue DevTools 浏览器插件的正常使用，只是让 Vue3 组件调试更加高效。

---

4. 主要功能与使用方式

1. 组件树调试

• 可查看 所有 Vue 组件 及其层级关系。
• 可实时修改 props / data / computed 值，观察 UI 变化。
• 支持热更新（HMR），组件状态不会丢失。

📌 比 Vue DevTools 更强的点

• ✅ 即使热更新，组件状态仍然保留，不需要刷新页面。
• ✅ 支持 setup() 变量的直接调试，无须额外 defineExpose()。

---

2. setup() 变量调试

Vue DevTools 默认不会显示 setup() 变量，但 vite-plugin-vue-devtools 可以自动优化，让调试 Vue3 组合式 API 更方便。

📌 问题：Vue DevTools 默认不能调试 setup() 变量

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0); // Vue DevTools 默认看不到 `count`
</script>

💡 解决方案：使用 defineExpose()

<script setup lang="ts">
import { ref, defineExpose } from 'vue';

const count = ref(0);

defineExpose({
  count, // Vue DevTools 现在可以看到 `count`
});
</script>

📌 比 Vue DevTools 更强的点

• ✅ setup() 变量可以自动暴露，无需手动 defineExpose()。
• ✅ 支持 ref、computed、watch 变量的直接修改。

---

3. Vue Router 调试

• 可查看 所有注册的路由。
• 可查看 当前路由的 params 和 query，支持手动修改参数。
• 支持动态路由，可以追踪 :id 等参数变化。

📌 比 Vue DevTools 更强的点

• ✅ 可以实时修改 query 参数，直接影响前端页面，不需要刷新。
• ✅ 支持 Vue Router beforeEach、afterEach 等导航守卫调试。

---

4. 生产环境调试支持

Vue DevTools 仅限开发环境，但 vite-plugin-vue-devtools 可在生产环境开启调试（需要手动启用）。

📌 如何在生产环境启用？

在 vite.config.ts 里开启：

import vueDevTools from 'vite-plugin-vue-devtools';

export default defineConfig({
  plugins: [
    vueDevTools({
      disableInProd: false, // 允许生产环境启用 Vue DevTools
    }),
  ],
});

然后在 main.ts 手动启用：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

if (import.meta.env.PROD) {
  import('vite-plugin-vue-devtools/client').then((devtools) => {
    devtools.connect();
  });
}

app.mount('#app');

📌 比 Vue DevTools 更强的点

• ✅ 支持 vite build 之后在生产环境调试（仅限启用的项目）。
• ✅ 方便排查线上 bug，不需要用户截图日志。