Tauri

1、Tauri安装使用

使用tauri之前需要做好准备工作，配置好相关环境

WebView2 环境

win7: 需要先手动来装WebView2
win10：安装完会自动安装WebView2
win11:系统自带WebView2



安装rustup(Rust 安装程序)
rust版本一定要1.77.2以上的版本

👉官网

🍎tauri官网

https://v2.tauri.app/

🍎tauri中文官网

https://tauri.nodejs.cn/start/

2、搭建打包项目

👉 搭建运行项目

🍎这里我们采用yarn的方式进行构建

yarn create tauri-app

搭建过程中给我们的提示

yarn create v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

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

Template created! To get started run:
  cd nexustauri
  yarn
  yarn tauri android init

For Desktop development, run:
  yarn tauri dev

For Android development, run:
  yarn tauri android dev

Done in 56.07s.

这个时候我们有下面这个提示,这里我们选择桌面端，也就是搭建vue实现的桌面端Desktop

For Desktop development, run:
yarn tauri dev

🍎启动服务端项目

cd nexustauri
yarn
yarn tauri dev


//安卓的话使用这个
yarn tauri android dev

🍎这里直接启动

yarn dev

到这里我们的tauri项目就搭建成功了，可以开发第一个应用了

🍎打包

yarn build

这个时候打包的就是一个普通的网页部分可以看到的页面

👉桌面打包

🍎安装 Tauri脚手架

// 安装 Tauri CLI
npm install -g @tauri-apps/cli

🍎Tauri脚手架打包打包为桌面应用（.exe）

tauri build

打包完成以后打开我们的文件夹

打包成功
  
.exe文件存在 项目根目录\src-tauri\target\release

双击这个时候已经出现了下面的界面，代表我们已经打包桌面端成功了

接下来就可以正常进行开发了

👉vue3项目打包为tauri桌面端

🍎初始化项目

确保你有Rust环境

确保你有Tauri 脚手架全局或者局部安装

// 安装 Tauri CLI   已经安装的忽略
npm install -g @tauri-apps/cli

npx tauri init

🍎设置windows桌面应用信息

编辑这个文件tauri.conf.json,把它里面的信息设置成我们想要的,这里我们使用它默认给我们的这个

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "nexusvuepro",
  "version": "0.1.0",
  "identifier": "com.tauri.dev",
  "build": {
    "frontendDist": "../dist",
    "devUrl": "http://localhost:8080",
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build"
  },
  "app": {
    "windows": [
      {
        "title": "nexus",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

🍎打包过程认识

这里打成.exe文件其实是使用Cargo构建的Rust环境，打开src-tauri目录，使用 Rust 的 tauri-build 工具来打包应用程序

Tauri打包过程：

（1）rust先去找src-tauri目录,打包这里面的东西其实是

（2）找对应配置文件：
  tauri.conf.json 文件包含了 Tauri 应用程序的配置信息
  如应用程序名称、版本、图标、权限等

（3）在刚刚的src-tauri目录使用cargo build命令编译Rust代码
    生成一个名为 tauri-driver 的可执行文件
    tauri-driver 可执行文件加载前端静态文件，并将它们嵌入到应用程序中
    根据配置文件中的信息，tauri-driver 会生成目标操作系统的可执行文件
    也就是在Windows 上是 .exe 文件（这里你知道为啥我们要改上面那个配置了吧）

🍎 打包错误

直接打包会提示我们这个错误

tauri build 

Error You must change the bundle identifier in `tauri.conf.json identifier`. 
The default value `com.tauri.dev` is not allowed 
as it must be unique across applications.

🍌原因

每个windows应用都有一个唯一标识，一般命名规则都是反向带着项目的名字,这里我们必须设置一个名字

🍌解决方法

打开 src-tauri/tauri.conf.json 文件,找到 bundle 部分并更改 identifier 的值

"bundle": {
  "identifier": "com.xxx.yourappname",
  // 其他配置...
}

//更改成自己的项目名字或者自己想要的名字即可

🍎重新打包

tauri build

打包完成以后文件在这个目录之中，我打包以后大概是在21M左右，不知道为啥没有官方宣传的3M大小那么神！（捂脸）

项目\src-tauri\target\release

接下来。愉快的开发tarui应用吧