初始 Tauri 篇一之初窥门径

为什么是 Tauri

能够实现多端桌面 app 开发的软件不少，主流有 Electron —— 一套 js 打天下，Flutter —— 移动端桌面端我全要，Qt —— 我要打10个！ ……

但问题也不少，Electron 体积实在没法优化；Flutter 更多还是移动端开发；Qt，能用 Qt 开发的选型对他们来说肯定不是问题。

那为什么是 Tauri？

对我个人来说，就是馋 Web 的界面，不想放弃性能，又想要较小的体积，Tauri 基于 Webview 实现的前端和基于 Rust 实现的后端刚好能够帮我实现这些需求。我也用 Qt 或 PyQt 写过几个桌面端的 app，性能和体积都可以做到很好，但是就是这个界面实在是优化不上去，当然这个纯属个人水平问题。

最后还是要提醒，由于 Tauri 目前也是刚刚初版完善起步，6月19日才发布了正式 1.0 版本，且由于生态尚不完善，文档水平一般，rust 学习成本较高等，可以说 Tauri 现在更适合实现那些不太需要后端操作的应用，入坑需谨慎！

环境配置

Tauri 环境配置其实并不难，安装好 node 环境和 rust 环境，然后就可以通过 npm 命令直接生成程序模板进行开发了。

Linux 及 Macos 环境配置

参考 Tauri: Prerequisites

// 安装 rust 环境
$ curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

// 成功后显示内容
Rust is installed now. Great!


// 安装不成功可能是因为缺少 C 编译器，因为 rust 是基于 c++ 的
// 针对 Macos
$ xcode-select --install

// 针对 Linux，以 Ubuntu 为例
$ sudo apt update
$ sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev


// 安装 node 环境
// 通用 访问官网获取安装包 https://nodejs.org/zh-cn/download/
// 针对 Macos
$ brew install nodejs

// 针对 Linux，以 Ubuntu 为例
$ sudo apt update
$ sudo apt install nodejs npm

Windows 环境配置

访问 Rust 官网，在 Rust 安装 界面下载对应版本程序，根据指示进行安装。

安装完成后进行环境变量的添加：编辑系统环境变量 -> 环境变量 -> 系统变量 -> 编辑变量 Path -> 添加对应路径，一般是 C:\Users\xxx.cargo\bin。

校验配置

// Rust 环境校验
$ rustc --version
// 对应正确的输出格式如下, 若未出现，则需校验 Rust 是否在系统变量中
rustc x.y.z (abcabcabc yyyy-mm-dd)

// Node 环境校验
$ node -v
$ npm -v
// 对应输出格式如下, 若未出现，则需校验 node 是否在系统变量中
vx.y.z
a.b.c

第一个程序

// 使用 pnpm 作包管理工具，根据提示选择选项，package manager和创建时的包管理工具一致即可
$ pnpm create tauri-app
$ cd xxx(Project name)
$ pnpm install
$ pnpm tauri dev

在编译过程中会发现 Tauri 前端用的是 Vite，真香！

如果发现下载相关依赖较慢，可以选择修改包管理器的源。

// 对于 Rust cargo
$ cd xxx\.cargo
$ touch config
$ # update config file
$ cat config
[source.crates-io]
# 替换成你偏好的镜像源
replace-with = 'rsproxy'
 
# 清华大学
[source.tuna]
registry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index.git"
# 中国科学技术大学
[source.ustc]
registry = "https://mirrors.ustc.edu.cn/crates.io-index"
# 上海交通大学
[source.sjtu]
registry = "https://mirrors.sjtug.sjtu.edu.cn/git/crates.io-index"
# rustcc社区
[source.rustcc]
registry = "https://crates.rustcc.cn/crates.io-index"
# 字节跳动
[source.rsproxy]
registry = "https://rsproxy.cn/crates.io-index"

// 对于 Node npm
$ npm config set registry https://registry.npmmirror.com  # 使用淘宝镜像源
$ npm config get registry
https://registry.npmmirror.com/ # 替换成功

锵锵！程序正常运行了起来。

编译发布

// (Project name)/src-tauri/tauri.conf.json
{
...
- "identifier": "com.tauri.dev"
+ "identifier": "com.tauri.build"
}

// 这就是程序的安装包
$ pnpm tauri build
$ ls (Project name)/src-tauri/target/release/bundle/msi
tauri-app_0.0.0_x64_en-US.msi

如果发现编译时卡在。

Downloading https://github.com/wixtools/wix3/releases/download/wix3112rtm/wix311-binaries.zip

可以选择手动下载相关依赖，在 wixtoolset/wix3 release 下载 binaries.zip 文件，将文件中的内容解压到 ’C:\Users\xxx\AppData\Local\tauri\WixTools\‘ 目录即可，没有对应目录则创建，Linux 和 Macos 好像暂时不受这个问题困扰。

自问自答

1. 官方教程都在哪里？

Rust 相关教程可以看这两个 官方：The Rust Programming Language （中文版见Rust 程序设计语言 简体中文版），社区：Rust语言圣经。

Tauri 相关教程见 Tauri 官方指南，还有零零散散的第三方教程等待发现。当然，娴熟地翻阅 Tauri 官方 api 文档 也不失为一种跟着教程学习。

2. 我还需要哪些工具辅助开发？

以 VSCode 为例，请一定要安装 rust-analyzer 插件，优秀的类型提示和 warning 提示大大减少了 rust 开发的心智负担。

但需要注意，该插件可能一下子会占用较高内存，约 2G 左右，而且可能会占用大部分的磁盘读写导致影响 PC 多开 Chrome 或同时执行其他任务。

3. 是否有官方例子借鉴？

当然有！Tauri 官方例程 从基础的 api，到多窗口，再到侧载其他语言依赖，都在这里有相关实现。

4. 第三方的包去哪里找？插件呢？

rust 第三方包在这里找 crates.io, 可能会看到想找到第三方包已经很久不更新了，请不要直接放弃，可以前往包的 github 仓库查看，说不定是有更新但是没同步。

tauri 相关插件可以用关键词 tauri-plugin 在 crates.io 中搜索，也可以直接在 plugins-workspace 看推荐的插件。

5. 有没有优秀的项目推荐？

以下是目前为止我发现的不错的项目，类型比较丰富，当然也欢迎推荐，更多可见 awesome-tauri: Apps。

Tauri + React 音乐下载器

Tauri + RSS 阅读器

Tauri + Vite + Vue3 B站客户端

Tauri + FFmpeg 视频转码等

Tauri + Clash

6. 怎么 Debug 呢？

⚠️ 作者暂时没发现能同时调试前后端的方法，即前端调试时后端无法打断点，后端调试时同理，有知道怎么做的请务必教我

根据 官方文档 Debugging in VS Code ，首先安装好 CodeLLDB 插件，创建好 .vscode/launch.json 和 .vscode/tasks.json。

对于纯前端 debug，执行 pnpm tauri dev 命令后，在 src 文件夹， 首先要修改 launch.json 为前端模式，或者删除之前创建好的 .vscode/lanuch.json 然后直接 F5 ，选择 Web App(Chrome) , 然后发现 localhost 拒绝了连接请求。

不急，我们回看 TERMINAL 看到 VITE Local： ‘http://127.0.0.1:1420' ，将 launch.json 中的 url 地址换成 Local 相同地址，此时再次 F5 ，就可以正常加断点 debug 了。

那当然我们也会想要 Vue.js devtools, 官方其实也提供了本地版本，根据 官方文档 一步步来就行。

无论此时用的是什么包管理器，建议仍然使用 npm 安装，yarn 和 pnpm 都会存在跑不完或时间很长的情况，毕竟相当于是直接下载一个 electron 程序的源码并安装相关依赖编译。

$ npm install -g @vue/devtools --verbose
$ vue-devtools

然后在 project 根目录下 index.html 中插入如下代码，稍作等待即可正常使用。

<script src="http://localhost:8098"></script>

对于后端 debug，不用执行任何命令，恢复 launch.json 和文档一致，然后在 src-tauri 文件夹，直接 F5，若遇到如下提示，选择 Debug Anyway 即可。

7. 我怎么还卡住了？

rust 在编译的时候很容易遇到一个问题就是卡在

blocking waiting for file lock on package cache lock

为什么会卡在这里？可能是同时有别的项目在编译，或之前多开了相关的 rust 程序处在编译过程中，解决方式也很简单，执行下面的命令后重新编译即可。

$ rm ~/.cargo/.package-cache

8. 能不能不用安装直接运行？

果然！做桌面端的都是有追求的！

但很可惜，实际上并不可以。

如果你用 QT 开发过 App 的话应该会很熟悉直接将 .exe 程序和 一堆 .dll 文件直接复制即可运行。

在编译后我们很容易看到 release 文件夹下的 tauri-app.exe 文件，双击也可以正常运行。

但当我们将整个文件夹复制到另一台 PC 时我们会发现程序直接闪退。

只有用 .msi 安装包安装才能正常运行，而且安装目录下基本也看不到 .dll 相关文件。

更多讨论可见

Issue: Portable windows build

Discussion: Is it possible to create a standalone binary?