Skip to content

vite+tauri创建桌面端项目

初始化

Shell
# 使用 yarn
yarn create tauri-app

# 或使用 npx
npx create-tauri-app

此项目以 vite + vue-ts 为例(使用 vite 是为了配合 vite-plugin-rsw 插件,可以无缝集成 webAssembly)。

img

项目结构

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

启动项目

有两种启动方式:

1. 启动 web 项目

纯前端项目,不和操作系统产生任何交互

yarn dev

2. 启动 tauri 项目

需要和操作系统产生交互,如系统文件读写操作

第一次启动项目时,tauri 会根据src-tauri/Cargo.toml 去下载相关依赖(导致第一次启动比较慢),第二次启动会快很多。

Shell
yarn tauri dev

img

构建应用

Tauri Bundler 是一个 Rust 工具,用于编译二进制文件、打包资产并准备最终捆绑包。 它会检测你当前的操作系统并相应地构建一个包。目前支持:

Shell
yarn tauri build

如果未修改 src-tauri/tauri.conf.json 中的 identifier 直接 build 会报以下错误。想要正确构建,只需修改为自己特有的标识符即可,如 com.myapp.dev。构建完成后,在 src-tauri/target/release/bundle/{platform}/{app} 下就可以找到应用程序安装包。

检查信息

检查 Tauri 信息以确保一切设置正确,在对问题进行分类时,此信息可能很有用。

Shell
yarn tauri info

img

遇到的问题

Blocking Waiting ....

😭为什么一直开在这?

img

什么会卡在这里?可能是同时有别的项目在编译,或之前多开了相关的 rust 程序处在编译过程中,解决方式也很简单,执行下面的命令后重新编译即可

Shell
$ rm ~/.cargo/.package-cache

toml_edit 版本问题

img

更新版本

img

进入src-tauri 安装

img

前端知识体系 · wcrane