最近一种在捣鼓 Tauri 集成 Vue3 技术开发桌面端应用实践,tauri 实现创建多窗口,窗口之间通讯功能。
开始正文之前,先来了解下 tauri 结合 vue3.js 快速创建项目。
tauri 在 github 上star高达53K+,而且呈快速增长趋势。相比electron构建应用更具优势。
分别用 Tauri 和 Electron 打包测试一个 todo list 程序。
Electron打包体积 69 M,Tauri打包体积才只有 7.5 M。
Tauri 构建的桌面应用体积远远比 Electron 构建的小得多。因为它放弃了体积庞大的 Chromium 内核和Nodejs,tauri前端集成了 webview,后端使用 Rust。而且 Tauri 构建应用还提供了诸多初始化程序模板,比如原生 JavaScript、Vue2/3、React、Svelte.js、SvelteKit 等。
准备工作
首先您需要安装 Rust 及其他系统依赖。
- "C++ 生成工具" 和 Windows 10 SDK。
- Tauri 需要 WebView2 才能在 Windows 上呈现网页内容,所以您必须先安装 WebView2。
- Rust
具体操作,请前往 预先准备 | Tauri Apps 来按步骤操作。
- 创建 tauri 初始化项目
具体的前端框架模板,大家根据实际情况选择。
npm create tauri-app
- 开发/构建打包
tauri dev tauri build
非常简单的几步就能快速搭建 vue3+tauri 桌面端模板。接下来就能顺利的开发了。
tauri 也提供了如下几种常用创建多窗口的方法。
- tauri.conf.json
{ "tauri": { "windows": [ { "label": "external", "title": "Tauri App", "url": "https://tauri.app" }, { "label": "local", "title": "Tauri", "url": "home.html" } ] } }
- src-tauri/src/main.rs
tauri::Builder::default() .setup(|app| { let docs_window = tauri::WindowBuilder::new( app, "external", /* the unique window label */ tauri::WindowUrl::External("https://tauri.app/".parse().unwrap()) ).build()?; let local_window = tauri::WindowBuilder::new( app, "local", tauri::WindowUrl::App("index.html".into()) ).build()?; Ok(()) })
- 通过前端 JS 创建窗口。
import