Tauri 使用 vue-devtools

Tauri 号称不强迫开发者（un-opinionated）、不依赖具体前端框架的（agnostic）桌面应用框架，Vue又以其简单易上手的特点在开发者中非常流行。

Vue Devtools 是一款可以在浏览器控制台中显示 vue 程序详情的小工具。

今天我们将它们结合起来，演示如何在一个新项目中配置 Vue Devtools.

前提

使用脚手架命令创建应用。

1cargo install create-tauri-app
2cargo create-tauri-app --rc

或

1pnpm create tauri-app --rc

https://v2.tauri.app/start/create-project/

安装 Vue Devtools

windows

1$env:ELECTRON_CUSTOM_DIR=""; npm install -g @vue/devtools

linux or macos

1export ELECTRON_CUSTOM_DIR=""
2npm install -g @vue/devtools

使用 Vue Devtools

启动 Vue Devtools

1vue-devtools

或将该命令加入到 package.json 中

1  "scripts": {
2    ...
3    "vue:dev-tools": "vue-devtools",
4    ...
5  }

引入 Vue Devtools

在 index.html 中引入。

 1<!doctype html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7    <title>Tauri + Vue + Typescript App</title>
 8  </head>
 9
10  <body>
11    <div id="app"></div>
12    <script type="module" src="/src/main.ts"></script>
13    <script src="http://localhost:8098"></script> <!-- 增加这一行 -->
14  </body>
15</html>

查看

此时，就可以在 tauri 中使用 vue-devtools 了。