03的开发日志
0%

Tauri入门笔记（1）安装和构建

发表于 分类于 ，
本文字数： 2.4k 阅读时长 ≈ 2 分钟
  1. 什么是Tauri
  2. 我想做什么？
  3. Windows下安装
    1. Microsoft C++生成工具
    2. WebView2
    3. Rust
      1. Rust和Cargo可执行程序放在哪里？
    4. Node.js
  4. 创建项目
  5. 构建

什么是Tauri

Tauri 是什么？ | Tauri

  1. 是一个二进制程序框架
  2. 能够进行主流桌面+移动平台开发
  3. 前端：HTML/JavaScript/CSS（能编译为这三类的）
  4. 后端：Rust、Swift、Kotlin等

特点：

  1. 打包体积小（使用系统自带webview而不是内置chromium）
  2. 支持任意前端框架
  3. 安全（基于Rust构建）

我想做什么？

我想用Tauri做一个桌面端应用程序，用来探索electron的替代方案，并学习rust。

Windows下安装

Microsoft C++生成工具

因为之前装过vs2022，搜索“Visual Studio Installer”，发现已经装好了

image-20260318005206676

image-20260318005224666

如果没装过vs，可以不安装vs，直接下载Microsoft C++ 生成工具来安装“使用C++的桌面开发”工具包。

WebView2

Windows 10 1803开始自带WebView2，如果没有，可以在这里下载：下载 WebView2 运行时，下载并安装“常青独立安装程序（Evergreen Bootstrapper）”。

image-20260318005456659

Rust

先检查一下rust是否已安装：

1
rustup -V

如果看到以下内容，则表示安装成功，可跳过这一节内容。

1
2
3
rustup 1.28.2 (e4f3ad6f8 2025-04-28)
info: This is the version for the rustup toolchain manager, not the rustc compiler.
info: The currently active `rustc` version is `rustc 1.93.1 (01f6ddf75 2026-02-11)`

否则，前往：安装 Rust - Rust 程序设计语言，下载rustup安装包

image-20260318005926689

运行后是一个终端窗口，一般用默认选项就行。

image-20260318010139569

安装rust会顺便把Cargo也装了，安装后的二进制程序位于~/.cargo/bin，安装程序最后会提示自动把这个目录添加到PATH环境变量中，确认即可

image-20260318010526832

终端执行命令，检查是否安装成功、环境变量配置成功。

1
cargo -V

输出：

1
cargo 1.94.0 (85eff7c80 2026-01-15)

执行：

1
rustc -V

输出：

1
rustc 1.94.0 (4a4ef493e 2026-03-02)

Rust和Cargo可执行程序放在哪里？

注意到~/.cargo/bin下面除了一个rustup.exe，其余全都是符号链接，右键这些符号链接-打开文件所在目录，结果全都指向rustup.exe

你是不是以为rustup.exe里面包含了cargo.exe、rustc.exe等程序？

其实不然，这些程序真实位置位于~/.rustup/toolchains/stable-x86_64-pc-windows-msvc/bin，rustup.exe更像是一个代理，通过符号链接文件的名称，对应应用程序名称，前往.rustup目录下面寻找对应工具链

做个实验，把.rustup目录下cargo.exe重命名为cargo-.exe，再去执行：

1
cargo -V

输出：

1
error: the 'cargo.exe' binary, normally provided by the 'cargo' component, is not applicable to the 'stable-x86_64-pc-windows-msvc' toolchain

对吧~

（别忘了改回来）

Node.js

输入：

1
node -v

输出：

1
v22.14.0

否则，前往nodejs官网下载msi安装包：

image-20260318011953784

创建项目

pnpm（推荐）

1
pnpm create tauri-app

npm（也行）

1
npm create tauri-app@latest

这是我的配置，仅供参考（pnpm/react/ts）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.../19cfcd35b8a-ce38                     |   +2 +
.../19cfcd35b8a-ce38                     | Progress: resolved 12, reused 2, downloaded 0, added 2, done
✔ Project name · frp-client
✔ Identifier · cn.whuls.frp-client
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · pnpm
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd frp-client
  pnpm install
  pnpm tauri android init

For Desktop development, run:
  pnpm tauri dev

For Android development, run:
  pnpm tauri android dev

进入目录并安装后，执行：

1
pnpm tauri dev

除了pnpm i，在tauri dev时，还会从网络下载各种资源（所以需要等一会儿），自动下载后自动开启dev模式，弹出窗口：

image-20260318013137872

dev时生成的exe文件位于${pwd}/src-tauri/target/debug

构建

运行：

1
pnpm tauri build

会自动构建exe和msi安装包，这个应该是可以配置的，后续有需要请查阅官网。

构建后文件位于：${pwd}/src-tauri/target/release，安装包则位于该目录的bundle/nsis或bundle/msi文件夹中。

安装包很小：

image-20260318014208884

默认安装界面是英文的：

image-20260318014258609

运行时只有一个进程：

image-20260318014401885

整个应用程序安装目录只有8.59MB：

image-20260318014434336