从零开始的 Tauri 开发 & 打包成 exe 【Windows 平台】

前言

我翻了翻网上很多教程，并没有很全面的 Windows 下安装使用 Tauri 的笔记，鉴于之前踩过了很多坑，所以来写一篇笔记，希望需要的伙伴能够用Tauri 顺利开发打包

这篇文章大概讲了以下内容：

安装 Rust
用 Tauri 开发和打包 exe

能够做什么？

可以将前端的页面变成一个应用，一个可以提供某种功能的应用，具体可以看下面这个图

在这里插入图片描述
前端的功能比较局限，比方说文件的读写啦，这时候通常是传给后端同学去处理

但是，我们做单应用程序，就没有什么前后端的区分了，而是渲染线程 + 主线程（借用 Electron 的概念）
请添加图片描述

其中的渲染线程可以理解为前端，主线程可以理解为后端，也就是干活的线程，Tauri 中就是用 Rust 语言来处理

请添加图片描述

选择 Tauri 的理由

打包后的安装包体积小，我之前的 Electron 打包太大了，100MB，用 Tauri 打包 10Mb，大概 10 倍的差距…

在这里插入图片描述

预先准备安装

我们看一下官网的预先准备，根据官网中的连接去下载

1. Microsoft Visual Studio C++ 生成工具

在这里插入图片描述

然后就是漫长的等待…我的电脑大概下载了半个小时吧。

在这里插入图片描述

2. WebView2（如果你的电脑是 Windows 11 的话，应该已经自带了）

可以下载常青引导程序的安装包检测是否安装过

在这里插入图片描述

3. Rust

首先打开 Rust 官网

在这里插入图片描述

点击下载下来 rustip-init.exe，如果直接打开的话，大概率卡在如下图这里

在这里插入图片描述

这是因为访问不到外网，我们配一下清华的下载源

首先打开一个 PowerShell 窗口，然后复制下面两行，回车

$ENV:RUSTUP_DIST_SERVER='https://mirrors.ustc.edu.cn/rust-static'
$ENV:RUSTUP_UPDATE_ROOT='https://mirrors.ustc.edu.cn/rust-static/rustup'

然后把刚才下载的 rustup-init.exe 拖进来，控制台就变成文件路径了，然后回车
请添加图片描述
之后按1，默认配置安装，然后回车等待即可

在这里插入图片描述

这个过程也很慢，可能是我的网不太好吧，反正耐心等一下吧，或者换一个 VPN 试试。

在这里插入图片描述

rustc --version

至此，我们的准备工作就做好啦！

启动 tauri ！

我们跳到官网的快速开始页面，然后用脚手架快速搭建一个 demo

yarn create tauri-app

在这里插入图片描述

之后编译一下试试

yarn tauri dev

在这里插入图片描述
如果卡在上面的截图的话，还是网络的问题，这里是下载 Rust 的依赖包，我们在配置一下 Cargo 的国内镜像源
找到你的用户的路径：C:\Users\你的用户名\.cargo

在这里插入图片描述

然后新建一个 config.txt，把下面的文件复制保存，然后把文件后缀删掉

[source.crates-io]
replace-with = 'tuna' # 指定使用下面哪个源，修改为source.后面的内容即可

# 中国科学技术大学
[source.ustc]
registry = "https://mirrors.ustc.edu.cn/crates.io-index"

# 上海交通大学
[source.sjtu]
registry = "https://mirrors.sjtug.sjtu.edu.cn/git/crates.io-index/"

# 清华大学
[source.tuna]
registry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index.git"

# rustcc社区
[source.rustcc]
registry = "https://code.aliyun.com/rustcc/crates.io-index.git"

然后再来试一下，可以看到 updating tuna index，说明我们的配置文件生效了。

请添加图片描述

可以了！然后就是静静的等待吧~

在这里插入图片描述

第一次下载依赖到第一次编译完成花了 24 分钟，第一次编译用了大概 3 分钟

打包成 exe

看一下官网中的打包说明，可以看到官网的命令就是 yarn tauri build，那我们试一下

PS E:\MyProgram\hello-tauri> yarn tauri build
yarn run v1.22.21
$ tauri build
       Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

在这里插入图片描述

可以看到他的报错信息说：这个字段必须唯一，默认值 com.tauri.dev 是不被允许的，那我们就改一下别的，只要不是这个就行呗，至于这个字段到底是干啥的，点我跳转

在这里插入图片描述

卡 wix311-binaries.zip

等待了一会儿之后，哎又卡住了…开着梯子也没用，(气)

在这里插入图片描述
那就我们手动下载吧，点击链接，下载下来之后

到 C:\Users\你的用户名\AppData\Local\目录下新建名为 tauri 的文件夹，然后新建 WixTools 文件夹，然后把解压的内容放到这个文件夹下
在这里插入图片描述

卡 nsis-3.zip

接着运行，发现又卡住了

在这里插入图片描述
我们接着点击链接下载，然后复制

在这里插入图片描述

NSIS文件被删掉了！

我们接着build，然后观察tauri 文件夹下的目录，发现 NSIS 文件夹会被删掉，

这是因为代码会检测 C:\Users\Wang\AppData\Local\tauri\NSIS\Plugins\x86-unicode 路径下的 ApplicationID.dll 和 nsis_tauri_utils.dll 是否存在，控制台中也说明了，NSIS 文件夹下缺失一些文件，重新创建它。

我们先把 NSIS 在复制过来，然后下载所需要的两个插件
在这里插入图片描述

// 这两个插件可能有最新版的，没关系，先下载下来复制过去，控制台会检测最新版本的，会提供新的链接。
// NSIS_APPLICATIONID_URL
https://github.com/tauri-apps/binary-releases/releases/download/nsis-plugins-v0/NSIS-ApplicationID.zip
// NSIS_TAURI_UTILS
https://github.com/tauri-apps/nsis-tauri-utils/releases/download/nsis_tauri_utils-v0.1.1/nsis_tauri_utils.dll

点击链接，然后打开解压包，把里面的 NSIS-ApplicationID\ReleaseUnicode 目录下的ApplicationID.dll 复制过来

在这里插入图片描述

nsis_tauri_utils.dll 就一个单文件，直接复制过来就行，然后运行 build

可以再检查一下，简单的文件树如下：

C:\Users\用户名\AppData\Local\tauri>
├─NSIS
│ ├─Bin
│ ├─Contrib
│ ├─Docs
│ ├─Examples
│ ├─Include
│ ├─Plugins
│ │ ├─x86-ansi
│ │ └─x86-unicode 下载的两个插件放这里
│ └─Stubs
└─WixTools

在这里插入图片描述