当前位置： 首页>后端>正文

Tauri开发指南

后端2024-04-19 17:01:56

Tauri开发指南,Tauri开发指南_根目录,第1张

Tauri简要介绍

Tauri 的主要特点：

基于Rust：后端开发基于Rust编程语言，拥有Rust的内存安全与高性能优势 跨平台：通过Webview2技术，实现Windows、Linux、MacOS的多平台兼容开发 轻量级：基于Rust和Webview，生成的APP体积小（相比Electron无需libcef.dll） 开发历程 主要途径：官网与文档教程（英文） 主要库：create-tauri-app、vue[1]、vite[2] ️开发环境：VSCode 基本步骤 这里如实记录自己从开始配置（新建文件夹）到初步启动（见到APP界面）的过程，中间有些曲折之处，也一并记录在内

1. 新建一个文件夹（此处命名为initial）

在资源管理器内一个正常目录新建一个文件夹，作为项目工程环境 （非系统、非隐藏、无读写限制）

2. 安装Tauri快速构建工具

（前置条件：安装了Rust工具链）

在文件夹（initial）目录下打开VSCode终端[3]运行cargo命令：

cargo init
cargo install create-tauri-app --locked

这两行命令的预计输出：

第一行：Created binary (application) package，表示「已经将当前文件夹初始化为一个二进制Rust包（crate）」 后记：此处可能是不必要的，因为后边使用Tauri构建工具时又创建了一个initial目录，重复创建了Rust库 第二行：更新包管理注册表索引、下载并编译create-tauri-app工具包 一共四百多个库，编译速度很慢（主要是最后一个library），建议这时候异步去做别的事情 从编译完成信息Finished release [optimized] target(s) in 54.00s可见，安装Tauri构建工具耗时将近一分钟

3. 运行Tauri构建工具（create-tauri-app）

用cargo运行如下命令[4]：

cargo create-tauri-app

然后在命令行内交互式输入信息，以配置包环境：

构建工具会让你在多个选项中选择，使用上下键（↑/↓）从多个选项中选取你需要的配置 下面仅展示最后配置好的命令输出，具体过程还请自行体验

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

Template created! To get started run:
  cd initial
  npm install
  npm run tauri dev

（此处并非立即执行To get started run下边提示的所有命令！）

总结一下，个人大致的选择是：

使用initial作为项目名称 使用前端技术作为UI开发技术栈 使用npm作为前端包管理系统 使用Vue作为前端开发框架 使用Vite作为前端构建工具 使用TypeScript作为UI开发语言

4. 处理包目录问题、Cargo.toml路径问题

这时自己遇到了一个意外情况：

❓预期：create-tauri-app在当前目录的基础上，将当前目录转化为APP开发目录 ❗实际：create-tauri-app在当前目录下创建了一个新文件夹作为APP开发目录 此时自己的做法是：将当前目录下initial子文件夹的所有内容【移动】到当前目录下，并【删除】移动后变空的子文件夹

此时项目的大致目录结构是：

initial
public
tauri.svg
vite.svg
src
assets
vue.svg
components
greet.vue
App.vue
main.ts
styles.css
vite-env.d.ts
src-tauri
src
main.rs
.gitignore
build.rs
Cargo.toml
tauri.conf.json
.gitignore
Cargo.toml
index.html
package.json
README.md
tsconfig.json
tsconfig.node.json
vite.config.ts

可以看到，这里边根目录与src-tauri重复作为Rust包被识别。

迁移完成后，在根目录下输入npm i以构建前端环境：

npm i

输出：

added 48 packages in 23s

npm耗时23s安装了48个包，总大小83.5MB（此为启动后大小）。

随即尝试构建项目，在根目录下用终端运行如下命令：

npm run tauri dev

cargo随即报错：

error: failed to parse manifest at `[...]\initial\Cargo.toml`

Caused by:
  no targets specified in the manifest
  either src/lib.rs, src/main.rs, a [lib] section, or [[bin]] section must be present

（这里使用[...]指代根目录的上级路径）

改为输入如下命令，也是同样结果：

cargo add tauri

报错信息的大体内容：

无法解析根目录下的Cargo.toml配置文件 错误原因： 找不到配置文件所（隐式）引导的入口文件（如src/lib.rs、src/main.rs） 也找不到[lib]、[[bin]]等配置项 大致原因解析：

是Cargo.toml配置与实际文件结构冲突，而非TOML解析错误（语法错误） 实际文件结构中，src目录是前端的开发目录（Rust后端目录在src-tauri），因此不可能有main.rs或lib.rs 另外，当时的Cargo.toml内容如下：

[package]
name = "initial"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]

将报错信息与Cargo.toml内容发送至LLM寻求解答（ask to LLM for help），LLM给出的建议大致内容为：

更新Cargo.toml，添加以下配置：

[package]
name = "initial"
version = "0.1.0"
edition = "2021"

[dependencies]
# ... your dependencies here ...

[[bin]]
path = "src-tauri/main.rs"

在处理Cargo.toml配置文件时遇到的错误提示表明，Cargo无法确定如何构建你的项目，因为没有指定任何构建目标。为了解决这个问题，你需要在Cargo.toml中添加一个[[bin]]表，指向你的源代码文件，并且确保路径正确指向src-tauri目录。通过更新配置文件并重新运行Cargo命令，你应该能够成功添加Tauri依赖并继续你的应用程序开发。如果问题仍然存在，建议查阅官方文档或在社区中寻求帮助。

根据此建议更新Cargo.toml，再运行如下命令：

cd .\src-tauri\
cargo b

cargo报错：

error: failed to parse manifest at `[...]\initial\Cargo.toml`
Caused by:
  binary target bin.name is required

大体原因翻译：需要二进制目标的name属性

随后将Cargo.toml的[[bin]]下path字段名改为name，并参照LLM提示附带追加了[lib]条目：

[上边的内容]

[[bin]]
name = "src-tauri/src/main.rs"

[lib]
path = "src-tauri/src/main.rs"

再次运行cargo b，得到以下报错：

error: failed to parse manifest at `[...]\initial\Cargo.toml`

Caused by:
  can't find `src-tauri/src/main.rs` bin at `src\bin\src-tauri/src/main.rs` or `src\bin\src-tauri/src/main.rs\main.rs`. Please specify bin.path if you want to use a non-default path.

❓然而令人困惑的是，src-tauri/src/main.rs确实存在。

这说明，有可能并非[[bin]]条目的问题——于是尝试删去[[bin]]条目，只留下[lib]及其（实际不合法的）path字段：

[package]
name = "initial"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]

[lib]
path = "src-tauri/src/lib.rs"

再次于src-tauri目录下执行cargo b，项目开始编译。

大致输出如下：

Updating crates.io index
  Downloaded alloc-no-stdlib v2.0.4
  [...]
  Downloaded 36 crates (34.9 MB) in 18.20s (largest was `windows` at 12.8 MB)
   [...]
   Compiling initial v0.0.0 ([...]\initial\src-tauri)
   Compiling webview2-com v0.19.1
    Finished dev [unoptimized + debuginfo] target(s) in 2m 10s

（总时长两分十秒，编译速度较慢）

5. 成功启动

直到这时，才开始运行crate-tauri-app提示的命令。

在根目录新开一个终端，输入如下命令：

cargo install tauri-cli 安装整个Tauri构建工具，大致输出为：

Updating crates.io index
  Downloaded tauri-cli v1.5.11
  Downloaded 1 crate (1.2 MB) in 1.41s
  Installing tauri-cli v1.5.11
    Updating crates.io index
  Downloaded aead v0.5.2
  [...]
  Downloaded 187 crates (12.1 MB) in 8.77s (largest was `tiff` at 1.4 MB)
   Compiling proc-macro2 v1.0.78
   [...]
    Finished release [optimized] target(s) in 7m 39s
  Installing [...]\.cargo\bin\cargo-tauri.exe
   Installed package `tauri-cli v1.5.11` (executable `cargo-tauri.exe`)

随后在src-tauri再次运行

npm run tauri dev

此时项目开始构建并工作：

> initial@0.0.0 tauri
> tauri dev

     Running BeforeDevCommand (`npm run dev`)

> initial@0.0.0 dev
> vite


  VITE v5.1.6  ready in 718 ms

  ➜  Local:   http://localhost:1420/
  ➜  Network: use --host to expose
        Info Watching [...]\initial\src-tauri for changes...
   Compiling initial v0.0.0 ([...]\initial\src-tauri)
    Finished dev [unoptimized + debuginfo] target(s) in 3.68s

（此处端口1420因人而异）

总体看，先是使用Vite构建了前端UI并打开Web连接，随后用cargo编译了src-tauri包

在展示出本地端口时，尝试用浏览器访问，但逻辑并未生效。

但随后系统弹出APP窗口，表示APP已开始调试：

Tauri开发指南,Tauri开发指南_Rust_02,第2张

初步构建成功时的APP页面在文本框中输入文本「Rustacean」，点击按键「Greet」，APP随即响应：

Tauri开发指南,Tauri开发指南_根目录_03,第3张

到此， Tauri APP初步构建成功


https://www.xamrdz.com/backend/3ew1922000.html

相关文章：