Tauri 开发实践— Tauri 工程搭建

简介: 本文首发于微信公众号“前端徐徐”,介绍了在 macOS 环境下使用 Rust 和 Tauri 构建跨平台桌面应用的过程。首先需安装 Rust 及系统依赖,参考链接:[Rust 入门](https://www.rust-lang.org/zh-CN/learn/get-started) 和 [Tauri 前置条件](https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites)。

本文首发微信公众号:前端徐徐。

⚠️注意:此工程搭建,演示环境为macOS。

终端环境要求

在开始开发tarui的项目之前,你需要安装Rust和系统依赖项。

具体可参考:

https://www.rust-lang.org/zh-CN/learn/get-started

https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites

命令行初始化项目

pnpm create tauri-app

按照命令行提示依次输入项目名称,包名,前端语言,包管理工具,前端UI框架库以及编程语言

现在如果你的vscode安装了rust-analyzerTauri这两个插件,在打开此项目的时候,会自动下载rust相关的依赖。按照提示可以进入项目根目录安装前端相关依赖并启动项目。首次启动会下载编译一些文件,可能会比较慢,建议使用科学上网。

如果一切顺利,你会出现这个界面,我这里选择的是Vite + React 的模式所以会出现这个界面,你如果选择其他的将会出现对应的界面。

项目结构

[tauri-app] # 项目名称
├─ [node_modules] # 前端依赖
├─ [src] # 前端程序源
├─ [src-tauri] # Tauri 程序源
│    ├─ [icons] # 应用程序图标
│    ├─ [src] # Tauri App 程序源,例如系统菜单,托盘,插件配置等
│    ├─ [target] # 构建的产物会被放入此文件夹中,target 目录的结构取决于是否使用 --target 标志为特定的平台构建
│    ├─ build.rs # Tauri 构建应用
│    ├─ Cargo.lock # 包含了依赖的精确描述信息
│    ├─ Cargo.toml # Tauri (Rust) 项目清单
│    └─ tauri.conf.json # 自定义 Tauri 应用程序的配置文件,例如应用程序窗口尺寸,应用名称,权限等
├─ index.html # 项目主界面
├─ package.json # 前端package.json配置
├─ tsconfig.json # typescript 配置文件
├─ vite.config.ts # vite 配置文件
└─ ... # 其他

打包构建

这里我们只是最简单的打包构建,并没有涉及到签名等操作,只是为了根据直观的学习整个流程,后面的教程会有专门的章节来讲打包构建。

直接运行构建命令

pnpm tauri build

会出现如下错误,需要修改一下src-tauri/tauri.conf.json中的"identifier"为"com.xtool",可根据自身的项目来确定identifier。第一次构建也会比较费时间,依然建议使用科学上网。

打包构建完成之后,安装包会出现在如下目录,到此就可以安装和使用了。

相关文章
|
存储 JSON 资源调度
10分钟带你从0到1搭建monorepo 工程化项目(一)
前言 大家好,我是Fly哥, 之前写博客的仓库,还是用的原生的html 和js 也没有引入 ts , 和一些工程化的东西, 所以自己重新搭建了一套前端项目架构 基于 lerna + yarn 的 monrepo的仓库, 主要是后面会学习输出的一些东西, 整个架子先搭建起来。 2d 和 3d 公共 util 的封装 个人 npm 包的发布 (rollup) 2d react 项目 搭建(vite) 3d react 项目 搭建 (webpack) 搭建一套基于webpack 5 的cli 每个项目都有一些特定的依赖, 但是也会有一些相同的依赖。比如eslint、 babel 的一些基础配置,
10分钟带你从0到1搭建monorepo 工程化项目(一)
|
2天前
|
存储 前端开发 安全
Tauri 开发实践 — Tauri 原生能力
本文介绍了如何使用 Tauri 框架构建桌面应用,并详细解释了 Tauri 提供的原生能力,包括文件系统访问、系统托盘、本地消息通知等。文章通过一个具体的文件下载示例展示了如何配置 Tauri 来使用文件系统相关的原生能力,并提供了完整的代码实现。最后,文章还提供了 Github 源码链接,方便读者进一步学习和参考。
18 1
Tauri 开发实践 — Tauri 原生能力
|
2天前
|
Rust 前端开发 JavaScript
Tauri 开发实践 — Tauri 日志记录功能开发
本文介绍了如何为 Tauri 应用配置日志记录。Tauri 是一个利用 Web 技术构建桌面应用的框架。文章详细说明了如何在 Rust 和 JavaScript 代码中设置和集成日志记录,并控制日志输出。通过添加 `log` crate 和 Tauri 日志插件,可以轻松实现多平台日志记录,包括控制台输出、Webview 控制台和日志文件。文章还展示了如何调整日志级别以优化输出内容。配置完成后,日志记录功能将显著提升开发体验和程序稳定性。
11 1
Tauri 开发实践 — Tauri 日志记录功能开发
|
2天前
|
存储 Rust 前端开发
Tauri 开发实践 — Tauri 配置介绍
本文首发于微信公众号“前端徐徐”,主要讲解`package.json`、`Cargo.toml`及`tauri.conf.json`三个文件的配置。其中,`tauri.conf.json`最为复杂,涉及众多配置项。`package.json`用于配置前端依赖与脚本;`Cargo.toml`用于声明Rust应用依赖;`tauri.conf.json`则管理前端资源、API白名单等。这些配置对于Tauri应用的开发至关重要。
16 5
|
2天前
|
Rust 前端开发 JavaScript
Tauri 开发实践— Tauri 怎么样
Tauri 是一个用于构建高效、小型二进制文件的框架,适用于所有主流桌面及移动平台。开发人员可以利用任何可编译为 HTML、JavaScript 和 CSS 的前端框架构建应用,并借助 Rust、Swift 或 Kotlin 进行后端开发。Tauri 采用三层架构,包括 tauri-app、WRY(跨平台 Webview 库)和 TAO(跨平台窗口管理器)。相较于 Electron,Tauri 使用系统内置浏览器引擎执行 Web APP,具有更小的资源占用和更高性能。详情见:[Tauri 官网](https://tauri.app/)。
13 0
Tauri 开发实践— Tauri 怎么样
|
2天前
|
自然语言处理 JavaScript 前端开发
Tauri 开发实践 — Tauri 主题&多语言设置开发
本文首发于微信公众号「前端徐徐」,介绍了在 Tauri 应用中实现窗口主题设置与多语言支持的方法。主题设置包括静态和动态两种方式,前者在应用初始化时设定,后者允许运行时更改。文章详细描述了通过 tauri-plugin-theme 插件实现动态主题变更的过程,并提供了代码示例。对于多语言支持,文章介绍了使用 i18next 进行多语言文件初始化及切换的方法。最后,提供了完整的源码链接,帮助读者更好地理解和实践。
15 4
|
2天前
|
JSON 自然语言处理 数据格式
Tauri 开发实践 — Tauri 自定义多语言菜单开发
本文介绍了如何在 Tauri 应用中实现自定义菜单并支持多语言。首先,通过 `Translator` 类加载和解析多语言 JSON 文件,实现简单的翻译功能。接着,创建包含文件、编辑和窗口子菜单的基本菜单结构,并根据当前语言进行翻译。最后,在主函数中读取语言设置,创建菜单并处理菜单事件,确保应用的国际化和用户体验。源码可在 GitHub 上查看。
13 2
|
2月前
|
Rust 资源调度 内存技术
Tauri——如何创建一个tauri项目
Tauri——如何创建一个tauri项目
41 4
|
5月前
|
缓存 Rust 前端开发
【一起学Rust | 框架篇 | Tauri2.0框架】Tauri2.0环境搭建与项目创建
【一起学Rust | 框架篇 | Tauri2.0框架】Tauri2.0环境搭建与项目创建
522 0
|
5月前
|
资源调度 JavaScript 前端开发
Vite:下一代前端构建工具的快速上手
Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具,它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能,提供了几乎即时的开发环境启动速度和高度优化的开发体验。
95 2