基于tauri+vue3.x多开窗口|Tauri创建多窗体实践_tauri vue3

最近一种在捣鼓 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