开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情
前言
花了不少功夫终于算用 Tauri 把以前的老项目翻新了一下,效果还不错。有鉴于过程中遇到了不少的坑,同时 Tauri 相关的资料又特别少,特此记录,希望对你有所帮助。也欢迎试试 mission-backup 来给自己的文件加上一份本地备份。废话不多说,让我们进入正题。
为什么是 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 环境配置
// 安装 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
// 如果你的 Ubuntu 版本是 22.04,记得安装 libfuse3, 否则会 build 失败
$ sudo apt install libfuse3
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
$ echo -e "[source.crates-io]\nreplace-with = 'tuna'\n\n[source.tuna]\nregistry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index.git"" > config
$ cat config
[source.crates-io]
replace-with = 'tuna'
[source.tuna]
registry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index.git"
// 对于 Node npm
$ npm config set registry https://registry.npm.taobao.org/
锵锵!程序正常运行了起来。
编译发布
// (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,到多窗口,再到 sidecar,都在这里有相关实现。
4. 第三方的包去哪里找?插件呢?
rust 第三方包在这里找 crates.io, 可能会看到想找到第三方包已经很久不更新了,请不要直接放弃,可以前往包的 github 仓库查看,说不定是有更新但是没同步。
tauri 相关插件可以用关键词 tauri-plugin 在 crates.io 中搜索,也可以直接在 awesome-tauri 看推荐的插件,需要注意的是,很多插件并没有开发完成,比如 tauri-plugin-store 等。
5. 有没有优秀的项目推荐?
以下是目前为止我发现的不错的项目,类型比较丰富,当然也欢迎推荐!
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,不用执行任何命令, 在 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 相关文件
更多讨论可见
Discussion: Is it possible to create a standalone binary?
一点题外话
最后还是想再聊聊 Tauri,以一个普通前端的视角。
Tauri 好用吗?
可以说好,也不好。好在前端部分对于前端工程师基本没有上手难度,甚至可以基本理解为我们只是在 pnpm create vite my-vue-app --template vue
后再手动添加一个 src-tauri 文件夹来处理后端。不好在它资料少,了解的人少,用的人也少,这意味着即使是一些简单的坑,也可能需要你自己一个个去趟,甚至你会是第一个遇到的。
Tauri 上手简单吗?
可以说简单,也可以说不简单,看你是想要用它做什么。就像我们上面提到的, Tauri 前端部分相当简单,你甚至可以直接平移一个基于 Vite 的前端项目然后简单改改就能直接跑起来。它也不简单,毕竟是用 rust 写后端,心智负担会比 js,ts 高不少,特别是当你不幸一定要涉及生命周期一类的功能。
Tauri 未来会怎么样?
作为一个普普通通的前端,我没法给出自己的答案,但我还挺喜欢它,虽然我已经被坑了好几次...目前在我看来, Tauri 很适合前端写点小工具,网页无论如何都是需要载体的,无论是用自己的服务器或是借用静态页面,而桌面对于程序员又是个基本天天会打交道的地方,它很适合承担一些任务,而 Tauri 就很适合实现它们,毕竟体积和性能摆这儿呢。
博客版:
Medium 版:
New Acquaintance With Tauri Chapter 1: Startup With Template