Tauri

1、Tauri安装使用

🍎常用命令

// 项目打包为tauri

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

// 初始化tauri
npx tauri init

// 打包tauri -- 可直接运行
tauri build

// 打包tauri --安装运行一体包（windows版本）
tauri bundle

// 其他
// 运行tauri
tauri dev

// 查看tauri版本
tauri --version

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

javascript



WebView2 环境

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



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

👉官网

🍎tauri官网

javascript

https://v2.tauri.app/

🍎tauri中文官网

javascript

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

2、搭建打包项目

👉 搭建运行项目

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

javascript

yarn create tauri-app

搭建过程中给我们的提示

javascript

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

javascript

For Desktop development, run:
yarn tauri dev

🍎启动服务端项目

javascript

cd nexustauri
yarn
yarn tauri dev


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

🍎这里直接启动

javascript

yarn dev

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

🍎打包

javascript

yarn build

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

👉桌面打包

🍎安装 Tauri脚手架

javascript

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

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

javascript

tauri build

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

javascript

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

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

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

👉vue3项目打包为tauri桌面端

🍎初始化项目

确保你有Rust环境

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

javascript

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

npx tauri init

🍎设置windows桌面应用信息

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

格外注意需要设置的部分

"productName": "nexusvuepro", //应用名称
"version": "0.1.0", //版本号
"identifier": "com.tauri.dev", //应用标识符--唯一
"build": {
    "frontendDist": "../dist", //前端打包后的文件路径
    "beforeBuildCommand": "yarn build", //打包前执行的命令
    "beforeDevCommand": "yarn dev", //启动前执行的命令
    "devUrl": "http://localhost:5173", //开发环境启动的地址
},

完整文件

javascript

{
  "$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 工具来打包应用程序

javascript

Tauri打包过程：

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

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

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

🍎 打包错误

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

javascript

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 的值

javascript

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

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

🍎重新打包

javascript

tauri build

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

javascript

项目\src-tauri\target\release

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

3、配置优化

🍎打包vitepress博客

✨初始化以及配置

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

✨配置项目

"productName": "nexusvuepro", //应用名称
"version": "0.1.0", //版本号
"identifier": "com.tauri.dev", //应用标识符--唯一
"build": {
    "frontendDist": "../dist", //前端打包后的文件路径
    "beforeBuildCommand": "yarn build", //打包前执行的命令
    "beforeDevCommand": "yarn dev", //启动前执行的命令
    "devUrl": "http://localhost:5173", //开发环境启动的地址
},

✨打包

tauri build

✨运行exe文件，打包生成的目录在这个文档下面

项目\src-tauri\target\release

🍎优化包

之前我们的包打出来以后是很多文件组成的，如何将所有文件整合为一个exe文件呢

✨命令

tauri bundle 

// 生成的包的位置如下
\src-tauri\target\release\bundle\msi

D:.
├─.fingerprint
│  ├─adler2-43826f74bcc0fed1
│  ├─aho-corasick-4ce77f29b8c62f7b
│  ├─aho-corasick-8535d060b5fb0865
│  ├─alloc-no-stdlib-3b9defc09250502c
    xxx
├─build
│  ├─anyhow-54e03999d9133c3a
│  ├─anyhow-67663f2085d3a7b3
│  │  └─out
│  ├─anyhow-ecc5d843216389e9
│  │  └─out
│  ├─app-997f791a7fa4648e
│  ├─app-9ffe3ef5b5dafa47
│  │  └─out
│  │      ├─app-manifest
│  │      └─tauri-codegen-assets
│  ├─camino-15fc9d0967f60d84
│  │  └─out
      xxx 
│  │  └─out
│  │      └─permissions
│  │          ├─app
│  │          │  └─autogenerated
              xxx
│  ├─tauri-plugin-log-a76538e78166203f
│  │  └─out
│  ├─tauri-plugin-log-b5df300448423088
│  ├─tauri-runtime-3298681dd7abd6f1
│  ├─tauri-runtime-d9e1f345369b5821
│  │  └─out
│  ├─tauri-runtime-wry-c0f40c4181370ca0
│  ├─tauri-runtime-wry-dbdec13b81cc0f36
    xxx
│  ├─typenum-e9a685e7d4f8200e
│  │  └─out
│  ├─webview2-com-sys-21b70c7cc7ac6945
│  │  └─out
│  │      ├─arm64
│  │      ├─x64
│  │      └─x86
│  ├─webview2-com-sys-a1519ecee3586c65
│  ├─windows_x86_64_gnu-30d6429a7e571f6d
│  ├─windows_x86_64_gnu-3a7450cdd810d95f
│  ├─windows_x86_64_gnu-6f5aed80385c4ef9
│  │  └─out
│  ├─windows_x86_64_gnu-b603be730fd871bf
│  │  └─out
│  ├─windows_x86_64_gnu-b8f1a874271a305e
│  │  └─out
│  ├─windows_x86_64_gnu-ff6a151188e5057b
│  │  └─out
│  ├─wry-d00ee14046386934
│  │  └─out
│  ├─wry-f8f56bed0ebfddf7
│  ├─zerocopy-471e7f91aa03f5f9
│  │  └─out
│  └─zerocopy-cf0b25f3e54ddd09
├─bundle
│  └─msi
├─deps
├─examples
├─incremental
├─resources
└─wix

✨配置tauri.conf.json文件查看我们包的大小，目前我的包大小为103M大小，安装运行以后，已经可以在我们的桌面上看到我们的应用了NexusNote

//现在我们的配置如下
"bundle": {
  "active": true,
  "targets": "all",
  "icon": [
    "icons/32x32.png",
    "icons/128x128.png",
    "icons/128x128@2x.png",
    "icons/icon.icns",
    "icons/icon.ico"
  ]
}

Tauri ​

1、Tauri安装使用 ​

🍎常用命令 ​

👉官网 ​

🍎tauri官网 ​

🍎tauri中文官网 ​

2、搭建打包项目 ​

👉 搭建运行项目 ​

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

🍎启动服务端项目 ​

🍎这里直接启动 ​

🍎打包 ​

👉桌面打包 ​

🍎安装 Tauri脚手架 ​

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

👉vue3项目打包为tauri桌面端 ​

🍎初始化项目 ​

🍎设置windows桌面应用信息 ​

🍎打包过程认识 ​

🍎 打包错误 ​

🍎重新打包 ​

3、配置优化 ​

🍎打包vitepress博客 ​

🍎优化包 ​

Tauri

1、Tauri安装使用

🍎常用命令

👉官网

🍎tauri官网

🍎tauri中文官网

2、搭建打包项目

👉 搭建运行项目

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

🍎启动服务端项目

🍎这里直接启动

🍎打包

👉桌面打包

🍎安装 Tauri脚手架

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

👉vue3项目打包为tauri桌面端

🍎初始化项目

🍎设置windows桌面应用信息

🍎打包过程认识

🍎 打包错误

🍎重新打包

3、配置优化

🍎打包vitepress博客

🍎优化包