Tauri 是什么
Tauri 是一个基于 Rust 实现的跨端桌面应用开发工具。应用的界面仍然可以使用前端进行开发，你可以使用原生的HTML，CSS，JS，也可以使用 React 、Vue 等前端框架，这一点并不受限制。
相比于 Electron，它的突出优点就是体积小。众所周知，Electron 相当于是打包了一个小型浏览器，体积大，还占内存。而 Tauri 开发的应用，前端使用操作系统的 webview，后端集成了 Rust，使得打包后的体积相当小。有人对比了打包同样一个 Hello World 程序，Electron 打包的应用在 50 MB 左右，而 Tauri 只有 4 MB 大小。
本文将演示如何创建一个 Tauri 项目，并打包成 windows 平台下的应用。由于我尚未掌握 Rust ，所以示例应用不会演示后端部分的开发。
示例代码在这里，点击访问。
环境准备（Windows）
Rust
Tauri 依赖 Rust，可以参考我的这篇文章《Rust 安装和 Hello World》来安装 Rust。也可以阅读官方文档《预先准备》。具体步骤就不再演示。
Microsoft Visual Studio C++ 构建工具
在上面安装 Rust 时会自动安装。也不再演示。
WebView2
Tauri 借助 WebView2 在 Windows 上呈现 Web 内容。我使用的是Windows 11，已经预装 WebView2。如果是 Windows 10，可以从Microsoft 网站下载并运行常青版引导程序，会自动为系统下载合适的版本。
创建项目
使用脚手架创建项目
官方文档推荐使用 create-tauri-app 脚手架来创建 Tauri 项目，它支持原生 HMTL/CSS/Javascript，也支持其他前端框架，如 React、Vue、Svelte。文档推荐使用 Vite 来构建前端应用。
我们使用 pnpm 创建项目：
pnpm create tauri-app如果你使用的是 npm 或者 yarn，可以这样创建项目：
npm create tauri-app
# or
yarn create tauri-app创建的过程中，会提示输入项目名和选择一个包管理工具，其中 cargo 是 rust 的包管理工具，我们选择自己熟悉的即可：
接着是选择一个 UI 模板，这里我们选择使用 vue：
之后项目就创建完成了，进入项目目录和安装依赖：
安装好依赖后，启动项目：
pnpm tauri dev该命令，首先会执行 pnpm dev，也就是启动一个 vite 脚手架来前端页面：
大概经过 3 分钟左右的编译，Rust 后端程序也启动了，就会自动弹出 Tauri 应用：
Tauri 项目目录结构
项目创建完成之后，进入项目目录，来看下它的结构。
其实就是在一个 Vite 脚手架创建的 Vue 项目中，又插入了一个 Rust 后端程序。
Vue 部分的无需多言了，来看下 Rust 部分的：
- src-tauri/src：这里写 Rust 代码。很遗憾我还不会。本文也就不写了。
- src-tauri/target：这里存放了 tauri 应用编译构建时的代码
- src-tauri/Cargo.toml：相当于前端项目中的 package.json，是 rust 项目的包文件信息
- src-tauri/tauri.conf.json：Tauri 应用的配置文件，可以设置应用名称，打包环境，打包命令等等信息。
开发
熟悉了 Tauri 应用的基本结构之后，我们来实现一个简单的 todo 应用。
安装组件库
我们引入 Element Plus 组件库，使用它的 ElButton 组件和 ElInput 组件。
pnpm add element-plus还需要用到 Element Plus 提供的图标：
pnpm add @element-plus/icons-vue配置组件的按需导入：
pnpm add -D unplugin-vue-components unplugin-auto-importvite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
]
// ......
})安装 Sass
再安装一个 Sass 预处理器：
pnpm add sass写一个 todo
直接在 App.vue 中实现：
<script setup>
import { ref } from 'vue';
import { Close } from '@element-plus/icons-vue'
let id = 0
const todosList = ref([])
const text = ref('')
const onAddTodo = () => {
todosList.value.push({
id: id++,
text: text.value
})
}
const onComplete = index => {
todosList.value.splice(index, 1)
}
</script>
<template>
<div class="todo-container">
<h1>Todo List</h1>
<div class="head">
<el-input type="text" v-model="text"></el-input>
<el-button @click="onAddTodo" type="primary">添 加</el-button>
</div>
<div class="list" v-if="todosList.length">
<ul>
<li v-for="(todo, index) in todosList" :key="todo.id">
<span>{{ index + 1 }}. </span>
<span>{{ todo.text }}</span>
<el-icon :size="16" color="gray" @click="onComplete(index)" style="cursor: pointer;">
<Close />
</el-icon>
</li>
</ul>
</div>
</div>
</template>预览下效果：
调试
调试和开发前端应用一样，按 F12 ，打开开发者工具进行调试。
打包
在命令中执行打包命令：
pnpm tauri build会报错：
提示我们要修改 identifier 的值，打开 tauri.conf.json进行修改。
原来的：
"identifier": "com.tauri.dev",修改为：
"identifier": "com.tauri.build",然后再次执行打包命令，此时能正常打包了，大概也要花三五分钟左右的时间：
打包完还要从 Github 上下载一个 wix3 的程序，用来构建 .msi 格式的安装包，大小为 33.1 MB，由于网络情况下载会很慢，大概率下载不下来。
提前下载好（点此下载），解压后的内容放到 C:\Users\用户名\AppData\Local\tauri\WixTools 目录下。
然后再次执行打包命令：
打包生成的安装包，会放到项目的 src-tauri/target/release/bundle/msi 目录下，而且体积非常小：
双击安装就能使用了：
小结
到此为止，我们体验了一把使用 Tauri 开发桌面端应用的流程。可以感知到，它对前端开发者是十分友好的，但是如果想深入掌握它，必须学习 Rust，增加了学习成本。这是相比于 Electron 的劣势。它的优势就不必多说了，得益于 Rust，体积小，性能好，安全性高。
