Tauri 跨端的又一选择

背景

近期疫情反复，新增很多高风险区域，公司开始要求每天查双码，每天上班前自查，并通过钉钉的智能填表提交截图，后台管理人员下载所有提交记录，并根据信息下载图片存档。前期后台的同学提供了一个 jar 包，通过控制台输入命令和参数下载，部门有开发经验的同学用着还可以，但综合管理部的妹子也想用，她们不想配 Java 环境，希望有个界面化的程序给她们使用。老板让我帮忙看看，能不能把 jar 转成界面化的程序。老板说了，那就安排。

和 jar 包开发的同学沟通好，封装无能为力，不管功能倒是挺简单的，花1天时间撸一个。

定方案

最先想到是Web，Jar转为 API，但由于网络策略服务器不能连外网 Web 方案排除；C#，6-7年没用过，忘完了；Flutter，4 年前写过一个App，时间太长，不是优选；Python、Go 只会 Hello World，还要读取Excel、写文件，太复杂排除；Web 包壳，除了壳都是熟悉的领域可行，开干。

选框架

由于近期技术栈一直是 Vue3 为核心，所以页面的开发优先 Vue3 + Vite。壳的话主要有 Electron、Tauri ，在印象里 Electron 应用体积太大，和诉求（功能简单，产物体积应小，太大会被吐槽，其实主要是想试试水）不符，排除。

Tauri

初识 Tauri 是在 2021 年 JavaScript 明星项目 的最受欢迎项目，它排第5。由于 Vite、esbuild、swc 等工具的大火，让基于Go、Rust 的高效率、跨语言前端构建类工具进入爆发期，加上 Bundleless 优质体验，让 Rust、Go 成为前端er的又一扇门（由于其语法和定位，大部分前端选择的是 Rust）。由于Tauri的 Rust 背景，加上构建产物小、WebView2 在 win11 的内置、Mac 内置 WebKit，对它进行了特别的留意（点了个 Star）。

Rust 前景还是非常不错的，如 linux内核接纳rust，deno采用rust，微软拥抱rust，fuchsia的rust代码占比超50%，Apple在底层all-in rust，连续6年的stackoverflow最受欢迎语言。就是学习门槛稍微有点高

介绍

Build smaller, faster, and more secure desktop applications with a web frontend

按照官方介绍是 “用前端技术构建一个更小、更快、更安全的桌面应用程序”。在技术实现上，前端使用操作系统的 WebView，后端和操作系统集成这块使用 Rust 实现。再往下，macOS 和 Windows 上用 tao 作界面处理库、在 Linux 上使用的是基于 gtk 孵化的WRY。虽然都叫 WebView，但在 macOS 上利用 WebKit，在 Windows 上利用 WebView2，在 Linux 上利用 WebKitGTK。

作为桌面端跨端新方案，大家都会默认归为 Electron 的替代方案，这类的框架也越来越多，Tauri 只是其中之一。它们都去尝试解决 Electron 的两个大问题：

• 构建产物过大。Electron 通过 Chromium、Node 来抹平各端差异，构建产物一定有这部分内容，导致产物压缩后也有几十M
• 内存消耗大。Chromium 吃内存，还有要提供操作系统访问能力的Node，内存消耗较大，对小项目不友好

看着这两个问题都被 Tauri 解决了，但新势力有个缺点就是 文档不完善、配套没跟上，一切资料来源于官网（有点简陋，目前够用）。

WebView2 微软对其的支持力度很大，为提升Office、OutLook等的体验，2021年4月开始对windows 2101版本以上进行推送，Windows 11 默认内置。其 runtime 包体积小，大概1.8MB，底层使用新版本edge的内核。微软内部桌面应用逐渐从electron切换到webview2，感觉 Tauri 是卡着时间点的框架，是桌面应用螺旋形上升发展的一个现象级框架。

与 Electron 对比

Detail	Tauri	Electron
Installer Size Linux	3.1 MB	52.1 MB
Memory Consumption Linux	180 MB	462 MB
Launch Time Linux	0.39s	0.80s
Interface Service Provider	WRY	Chromium
Backend Binding	Rust	Node.js (ECMAScript)
Underlying Engine	Rust	V8 (C/C++)
FLOSS	Yes	No
Multithreading	Yes	Yes
Bytecode Delivery	Yes	No
Multiple Windows	Yes	Yes
Auto Updater	Yes	Yes1
Custom App Icon	Yes	Yes
Windows Binary	Yes	Yes
MacOS Binary	Yes	Yes
Linux Binary	Yes	Yes
iOS Binary	Soon	No
Android Binary	Soon	No
Desktop Tray	Yes	Yes
Sidecar Binaries	Yes	No

对比后感觉全线秒杀，支持字节码交付，除开桌面端后续还会支持 iOS、Android 移动端。如果没特殊诉求，感觉可以试试。

环境安装

Tauri 和常规 npm 包一样没啥说的。由于底层实现，我们需要有 Rust 环境，这个不通系统有差异。不过也可以按照官方教程来。这里说下注意项

Mac

Mac 需要 xcode，若过遇到安装 Rust 失败，可以试试先把系统更新一下，重启后再执行 xcode-select --install，再安装 Rust。

Node 前端开发都有这环境，如果没有，建议直接去官方下载安装包，没必要弄啥 nvm

Window 10

Windows 安装 Rust 比较麻烦，需要先安装 Microsoft Visual Studio C++ build tools（就是最新的 Visual Studio 的 C++ 部分），一定要选择C++ x64/x86生成工具、 C++ Build Tools、Windows SDK （前面3个），否则缺少windows下的连接器 link.exe什么的导致没法编译。

第一个 Tauri App

可以直接使用 npx create-tauri-app 创建新项目，也可以在创建好的项目中添加依赖 @tauri-apps/cli ，然后在 package.json 的 scripts 添加命令

// package.json
{
  // This content is just a sample
  "scripts": {
    "tauri": "tauri"
  }
}

如果是在已有项目上添加依赖，安装完成后需要先初始化一次，会生成 src-tauri 目录，里面有一些配置文件，选择的时候注意端口号和静态资源目录

npm run tauri init

初始化完成后若是已有项目添加记得审查 src-tauri\tauri.conf.json 文件 的 build 属性，需要手动添加 Web 启动、构建命令

{
  "build": {
    "distDir": "../dist",
    "devPath": "http://localhost:3000",
    // web dev 命令，若启动dev一直出现出现下面的提示，审查下命令对不对 
    // [tauri:dev] Waiting for your frontend dev server to start on http://localhost:3000/... 
    "beforeDevCommand": "npm run dev",
    // web build 命令
    "beforeBuildCommand": "npm run build"
  }
}

完成后建议审查一次环境，命令如下：

npm run tauri info

如果出现开发 Dev 成功，但 Tauri Build 失败，建议审查一次环境，特别是 Windows。可能会出现安装 C++ build tools 时没安装上 WebView2，此时 dev 没问题，但 build 报 rust 编译错误。

Dev

完成后我们可以使用 npm run tauri dev 启动项目，第一次启动会从外部下载一些 rust 库，注意网络环境。

Build

虽说 Tauri 跨端，但构建依然只能构建当前系统的 App，如 Mac 只能产出 dmg，不能构建出 exe，可以通过 Github 的 Actions CI 构建各平台产物。如果代码不方便公开，可以考虑使用 docker ，或者用不通系统的机器构建。

Mac

Mac 下 build 一切顺利，产物在 /src-tauri/target/release/bundle 目录下

Windows

Windows 下 build 会下载一个叫 wix311-binaries.zip 的包，失败的概率挺大的。可以直接使用浏览器下载解压到 src-tauri/WixTools 目录，相关 Issue-Build error with wix3112

若构建时遇到 error running light.exe window 的错误，在 tauri.conf.json 的 bundle 找到 windows的 wix 添加语言。相关 Issue -error running light.exe window

"windows": {
  "wix": {
    "language": "zh-CN"
  }
}

构建成功后，产物也在 /src-tauri/target/release/bundle目录下

其实 release 目录下的 exe 也能直接使用，但 bundle 目录下的是安装文件，可把 webview2 的一些东西弄进去，用户直接安装就行，不管环境，当然也可在 tauri.conf.json 中设置，排除 webview2。

可根据实际情况进行策略调整，我这边选择的是不包含 webview2，直接提供裸包，提醒 windows 10 及以下系统用户进行 webview2 安装。

下一篇将讲诉开发过程中的注意点和常用Api。个人感觉 Tauri 在某些功能的支持上没有 Election 体验好，如 Node 包，需要使用 pkg。

源码：tauri-app-demo