Tauri 使用 vue-devtools

作者

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

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

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

前提

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

cargo install create-tauri-app
cargo create-tauri-app --rc

或

pnpm create tauri-app --rc

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

安装 Vue Devtools

windows

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

linux or macos

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

使用 Vue Devtools

启动 Vue Devtools

vue-devtools

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

  "scripts": {
    ...
    "vue:dev-tools": "vue-devtools",
    ...
  }

引入 Vue Devtools

在 index.html 中引入。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tauri + Vue + Typescript App</title>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script src="http://localhost:8098"></script> <!-- 增加这一行 -->
  </body>
</html>

查看

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

check_vue_dev_tools.png