1. 使用 Tauri 创建你的第一个桌面应用：从零开始到打包应用

发表于 分类于

引言

你是否想过用前端技术开发桌面应用？Tauri 是一个创新的框架，让你能够使用熟悉的 Web 技术（HTML, CSS, JavaScript）构建小巧、快速的跨平台桌面应用。本文将带你从零开始创建你的第一个 Tauri 应用，并解释其中的关键概念。

技术栈介绍

  • Tauri: 一个基于 Rust 的框架，用于构建轻量级桌面应用
  • Rust: 系统级编程语言，提供高性能和安全性
  • Node.js: JavaScript 运行时环境
  • pnpm: 快速、节省磁盘空间的包管理工具

为什么选择 Tauri？

  1. 体积小巧：生成的应用程序比 Electron 应用小很多
  2. 性能优异：基于 Rust 构建，运行效率高
  3. 跨平台：支持 Windows、macOS 和 Linux
  4. 熟悉的开发体验：使用前端技术栈开发
  5. 安全性强：内置安全最佳实践

环境搭建

1. 安装系统依赖

根据你的操作系统，可能需要安装一些基础工具链。请参考 Tauri 官方文档 获取详细要求。

2. 安装 Rust

Rust 是 Tauri 的核心依赖。打开终端运行以下命令：

1
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

安装完成后，运行以下命令确保 Rust 安装正确：

1
rustc --version

3. 安装 Node.js

推荐使用 nvm 管理 Node.js 版本：

1
2
3
4
5
# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# 安装最新 LTS 版本的 Node.js
nvm install --lts

或者直接从 Node.js 官网 下载安装包。

4. 安装 pnpm

1
npm install -g pnpm

创建你的第一个 Tauri 应用

1. 初始化项目

使用 pnpm 创建新项目（也可以使用 npm 或 yarn）：

1
pnpm create tauri-app

按照提示操作：

  • 输入项目名称（如 my-tauri-app）
  • 选择包管理器（pnpm/npm/yarn）
  • 选择前端框架（Vanilla/React/Vue/Svelte 等）或纯 HTML/CSS/JS

✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · pnpm
✔ Choose your UI template · Vue - (https://vuejs.org/)
✔ Choose your UI flavor · TypeScript

2. 安装依赖

进入项目目录并安装依赖：

1
2
cd tauri-app
pnpm install

3. 启动开发服务器

运行开发模式：

1
pnpm tauri dev

这将启动两个进程：

  1. 前端开发服务器（通常是 Vite）
  2. Tauri 应用窗口

你会看到一个桌面窗口，里面渲染着你的前端应用！
Tauri Demo

项目结构简介

1
2
3
4
5
6
7
8
my-tauri-app/
├── src/                # 前端源码
├── src-tauri/          # Tauri 相关配置和 Rust 代码
│   ├── Cargo.toml      # Rust 项目配置
│   ├── tauri.conf.json # Tauri 应用配置
│   └── src/            # Rust 源码
├── index.html          # 主 HTML 文件
└── package.json        # 前端项目配置

打包应用

当你的应用准备好发布时，运行：

1
pnpm tauri build

这会在 src-tauri/target/release 目录下生成可执行文件：

  • Windows: .exe 文件
  • macOS: .dmg 文件
  • Linux: .AppImage 或 .deb 文件

Mac Build Image

如果要修改打包选项，可以编辑 src-tauri/tauri.conf.json 后重新打包
Tauri Config

进阶学习

总结

通过本文，你已经学会了：

  1. Tauri 的基本概念和优势
  2. 如何搭建开发环境
  3. 创建和运行 Tauri 应用
  4. 打包应用

Tauri 为前端开发者打开了桌面应用开发的大门，结合了 Web 开发的便利性和原生应用的性能。现在就开始你的 Tauri 开发之旅吧！