跳到主要内容

04

你问的是：在 Tauri 中是否可以使用 Vue Devtools？

✅ 可以使用，但略有不同，需要手动配置。

🧪 Vue Devtools 在 Tauri 中的支持情况：​

Vue 版本支持方式说明
Vue 2.x✅ 支持（需安装 Devtools Vue 2）推荐用浏览器调试
Vue 3.x✅ 支持（需 Devtools Vue 3）可用 Devtools standalone 或扩展版

🧰 使用 Vue Devtools 的 3 种方式​

✅ 方法 1：使用浏览器打开前端调试界面​

Tauri 启动开发环境时，默认是通过 localhost:1420 打开的，你可以直接在浏览器打开调试页面并使用 Vue Devtools。

pnpm tauri dev

然后访问：http://localhost:1420 👉 使用 Chrome/Edge 插件版 Vue Devtools 正常调试。

✅ 方法 2：将 Vue Devtools 嵌入 WebView（内嵌调试工具）​

适用于你希望直接在 WebView 中打开 Devtools 面板的情况

安装 standalone Vue Devtools（推荐）​

pnpm add -D @vue/devtools

然后在 main.ts 中注入调试客户端（仅限开发环境）：

if (import.meta.env.DEV) {
  import("@vue/devtools").then((devtools) => {
    devtools.connect(/* host, port 可选 */);
  });
}

配合本地启动 Vue Devtools standalone 工具：

npx @vue/devtools

这会打开一个桌面应用，自动连接 Vue 应用。

✅ 方法 3：使用 Chromium Devtools 面板（打开 Devtools 窗口）​

如果你希望像 Electron 一样直接打开内嵌的开发者工具窗口，可以在 tauri.conf.json 中设置：

// tauri.conf.json
{
  "tauri": {
    "windows": [
      {
        "label": "main",
        "url": "http://localhost:1420",
        "fullscreen": false,
        "resizable": true,
        "title": "Matrx",
        "visible": true,
        "devtools": true // ✅ 启用 Devtools 面板
      }
    ]
  }
}

然后你可以在主窗口中按 Cmd+Option+I（mac）或 Ctrl+Shift+I（Windows）打开 Chrome Devtools。

⚠️ 注意事项​

问题解法
Devtools 面板中看不到 Vue 组件安装了 Vue 插件了吗？确认你使用了正确版本的 Vue Devtools（Vue 2 vs Vue 3）
WebView 中打开慢 / 不可调试浏览器中调试体验更好，开发阶段推荐浏览器调试，打包时再切换 WebView
Tauri 不显示 Devtools检查 tauri.conf.json 中 devtools: true 配置项
想要自动打开 Devtools可在 main.rs 用 .open_devtools() 启动窗口后调用（Rust 侧）

🧩 总结​

方式推荐场景是否需要额外工具
浏览器打开 Dev 页面💯 推荐开发阶段使用Chrome 插件版 Vue Devtools
standalone 客户端连接更接近 Electron 的开发体验安装 @vue/devtools
Tauri 打包内嵌 Devtools高级调试/需要内嵌 Devtools修改 tauri.conf.json 或 Rust 主进程

如果你告诉我你当前用的是 Vue 2 还是 Vue 3，我可以直接帮你给出最适配 matrx 的 devtools 启动脚本和注入方式。是否需要？