Tauri开发一： Tauri开发工具介绍

李向彬 2023-10-26
75 阅读 0 评论 0 点赞
Tauri开发一： Tauri开发工具介绍
​
目录
收起
1. Tauri介绍
2. Tauri开发工具介绍
2.1 前端管理工具
2.2 后端管理工具
2.3 tauri-cli的安装/使用方式
3. Tauri开发流程--Hello World
3.1 工具安装
3.1.1 安装NPM
3.1.2 安装cargo
3.1.3 安装tauri-cli
3.2 创建项目
3.2.1 创建前端项目
3.2.1.1 创建项目
3.2.1.2 修改为SSG模式
3.2.2 创建后端项目
3.3 运行项目
3.3.1 调试项目
3.3.2 查看项目信息
3.4 创建安装文件
3.4.1 Wixtool下载问题处理
3.4.2 nsis下载问题处理
3.4.3 Ubuntu创建appimage问题
系列文章： Tauri开发二： 调用后端Rust接口

2023-08-02 update：更新Ubuntu build失败问题解决方法

1. Tauri介绍

Tauri是一款使用Rust作为后端开发桌面应用的框架，具有如下优势：

  • 天生继承Rust的安全性
  • WEB通用的开发技术，支持多个前端框架的开发: SvelteKit Next.js 以及原生的javascript/HTML/CSS

Tauri的架构：

Image


  • 前端主要包括@tauri-apps/api, 该包主要实现实现对后端Rust代码的调用
  • 后端主要为tauri,一个使用rust编写的crate，封装了:
    • 系统调用
    • 窗口的管理


@tauri-apps/api 文档地址: npmjs.com/package/@taur

tauri 文档地址: docs.rs/tauri/latest/ta

2. Tauri开发工具介绍

Tauri开发工具初始接触的时候，会有点混乱，原因是因为Tauri的前端代码 和 后端代码是在一个目录下面，所以工具有混用的情况。
我们先看一个Tauri工程的代码目录结构:

Image


  • src目录即为前端代码的位置，相应的前端代码对应的package.json也位于根目录
  • src-tauri目录即为后端Rust代码的目录，里面有Rust的配置文件Cargo.toml

2.1 前端管理工具

前端管理工具为NPM，必须的依赖是@tauri-apps/api，如果凶狠一点，后面完全可以使用原生JavaScript 和 HTML/CSS开发，但是我们一般会选用一个框架进行开发，此时根据前端来选择其他的依赖

安装@tauri-apps/api可能需要安装Visual Studio 2019, 安装Visual Studio 2022可能会报错

2.2 后端管理工具

后端的管理工具为Cargo, Rust自带的包管理工具。此时我们可会手工安装tauri crate进行开发
但是为了方便开发，Tauri开发组发布了一个二进制工具 tauri-cli, 用来简化Tauri的开发流程：

  • cargo tauri init 用来创建项目
  • cargo tauri dev 用来启动测试服务器
    因此tauri-cli才是我们用来管理Tauri工程的工具，NPM处于辅助的位置

2.3 tauri-cli的安装/使用方式

tauri-cli有两种安装方式:

  • 使用 cargo： 原生安装, 安装和更新的方式为 cargo install tauri-cli
  • 使用 NPM： npm的安装包为对二进制的包装, 安装方式为 npm install --save-dev @tauri-apps/cli, 此时需要在package.json里面增加设置："scripts": {
    "tauri": "tauri"
    }

相应的的使用方式也有两种:

  • 使用cargo安装时，调用的方式为 cargo tauri xxx
  • 使用NPM安装时，调用的方式为npm run tauri xxx

3. Tauri开发流程--Hello World

开发工具我们了解清楚了，我们开始创建一个Hello World来实践一下

我们选择使用SvelteKit作为前端框架

3.1 工具安装

3.1.1 安装NPM

到Nodejs页面，下载nodejs的安装包: nodejs.org/en/download
安装完成以后，NPM工具也就安装好了

3.1.2 安装cargo

到rustup页面，下载rustup：rust-lang.org/tools/ins
rustup是Rust和cargo的安装工具，安装完成以后，cargo工具也就安装好了

过程中会安装Visual Studio 2022，主要用来作为Rust的编译工具
Image


3.1.3 安装tauri-cli

鉴于国内的cargo下载网速较慢，建议使用镜像，在用户目录(C:\Users\xxxx)下有个.cargo文件夹，在里面创建一个config文件(不带.txt后缀)，里面内容如下:

[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"
replace-with = ''sjtu''

[source.sjtu]
registry = "https://mirrors.sjtug.sjtu.edu.cn/git/crates.io-index"
初始update镜像的时候，会有点慢，请耐心等待

C:\Users\danny>cargo install tauri-cli

Updating sjtu index

运行命令cargo install tauri-cli 来安装工具

3.2 创建项目

3.2.1 创建前端项目

3.2.1.1 创建项目

运行命令行npm create svelte@latest会创建一个svelte的项目目录

目录结构

Image



svelte需要vitepackage, 因此我们需要运行npm install vite来安装相应的包

3.2.1.2 修改为SSG模式

svelte需要使用SSG模式下

运行命令 npm install --save-dev @sveltejs/adapter-static@next

同时更新文件svelte.config.js, 将import adapter from ''@sveltejs/adapter-auto''更新为import adapter from ''@sveltejs/adapter-static''

更新后的svelte.config.js为：

import adapter from ''@sveltejs/adapter-static'' // This was changed from adapter-auto
import preprocess from ''svelte-preprocess''

/** @type {import(''@sveltejs/kit'').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess(),

  kit: {
    adapter: adapter(),
  },
}

export default config

同时需要创建一个文件src/routes/+layout.ts

注意文件的名字里面带个加号
文件内容：
export const prerender = true
export const ssr = false

3.2.2 创建后端项目

运行命令 cargo tauri init

创建项目过程中会输入相应的参数，不同的前端框架使用的地址和文件路径不同，详细参考：tauri.app/v1/guides/get

我们使用的svelte相应的参数见下图：

Image


3.3 运行项目

3.3.1 调试项目

运行命令行cargo tauri dev

Image


3.3.2 查看项目信息

运行命令行cargo tauri info可以查看项目所有的信息

PS C:\Users\danny\programming\learning_tauri> cargo tauri info 

[✔] Environment
    - OS: Windows 10.0.19045 X64
    ✔ WebView2: 114.0.1823.82
    ✔ MSVC: Visual Studio Community 2022
    ✔ rustc: 1.71.0 (8ede3aae2 2023-07-12)
    ✔ Cargo: 1.71.0 (cfd3bbd8f 2023-06-08)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: stable-x86_64-pc-windows-msvc (environment override by RUSTUP_TOOLCHAIN)
    - node: 18.16.1
    - npm: 9.5.1

[-] Packages
    - tauri [RUST]: 1.4.1
    - tauri-build [RUST]: 1.4.0
    - wry [RUST]: 0.24.3
    - tao [RUST]: 0.16.2
    - @tauri-apps/api [NPM]: not installed!
    - @tauri-apps/cli [NPM]: 1.4.0

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../build
    - devPath: http://localhost:5173/
    - framework: Svelte
    - bundler: Vite
此时 distDir: ../build 还没有创建，在创建安装包的时候才会生成

3.4 创建安装文件

运行命令cargo tauri build会创建一个Windows的安装文件

生成的安装包在：src-tauri\target\release\bundle\msi\

3.4.1 Wixtool下载问题处理

编译过程中，会有从github下载失败的情况:

Error failed to bundle project: https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip: Network Error: Network Error:

此时需要下载： wix311 , 然后解压到C:\Users\dassi\AppData\Local\tauri\WixTools

需要根据自己的用户名变更位置
Image


3.4.2 nsis下载问题处理

编译过程中，会有从github下载失败的情况:

Error failed to bundle project: https://github.com/tauri-apps/binary-releases/releases/download/nsis-plugins-v0/NSIS-ApplicationID.zip: Network Error: Network Error: Error encountered in the status line:

此时需要下载： NSIS, 然后解压到C:\Users\dassi\AppData\Local\tauri\NSIS

需要根据自己的用户名变更位置


Image


3.4.3 Ubuntu创建appimage问题

Ubuntu 22在运行cargo tauri build的时候，会尝试创建.deb和.appimage包，但是由于在打包appimage的时候，需要从github下载配置文件，会出现下面的卡住现象:

✓ built in 751ms
........

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-static
  Wrote site to "build"
  ✔ done
✓ built in 2.84s
   Compiling app v0.1.0 (/home/danny/programming/rust/tauri/photo_managment/src-tauri)
    Finished release [optimized] target(s) in 9.24s
    Bundling photo-managment_0.1.0_amd64.deb (/home/danny/programming/rust/tauri/photo_managment/src-tauri/target/release/bundle/deb/photo-managment_0.1.0_amd64.deb)
    Bundling photo-managment_0.1.0_amd64.AppImage (/home/danny/programming/rust/tauri/photo_managment/src-tauri/target/release/bundle/appimage/photo-managment_0.1.0_amd64.AppImage)

如果你运行cargo tauri build --verbose,你会发现是由于从github下载文件失败导致的

m loop as ‘/usr/lib/llvm-14’.
find: File system loop detected; ‘/usr/lib/llvm-14/build/Release’ is part of the same file system loop as ‘/usr/lib/llvm-14’.
find: File system loop detected; ‘/usr/lib/x86_64-linux-gnu/hdf5/serial/lib’ is part of the same file system loop as ‘/usr/lib/x86_64-linux-gnu/hdf5/serial’.
+ true
+ cd /home/danny/.cache/tauri
+ wget -q -4 -N https://github.com/AppImage/AppImageKit/releases/download/continuous/AppRun-x86_64

只是当脚本运行到Bundling photo-managment_0.1.0_amd64.AppImage 这一步的时候，只需要通过Ctr+c终止程序，然后:

每次重新执行cargo tauri build后，都需要重新执行步骤2
标签： 技术社区

相关文章