辗转 Dioxus 和 Electrobun 后还是选择 Tauri：基于Tauri2+Vue3的快速开发框架

集成显卡
0 阅读4分钟

写在前面

最近我要写一个桌面小工具，帮助用户对工作目录（选定的文件夹）内的文件进行可视化操作，比如拖动、重命名、删除等，综合对比了 Electron（以往用的最多）、Tauri、Dioxus、Electrobun，最终还是选择了 Tauri 😄。

为了以后相似项目的开发，我开源了一个基于 Tauri2、Vue3、Naive UI（组件库）的快速开发模板：Gitcode、Github。

竞品对比

Electron

圈内大名鼎鼎的 Electron 就不多说了，虽然诸如构建体积大、启动慢、占用内存多的缺点，被一直诟病，但超完善的生态，稳定的多平台兼容，做大型项目时还是首选😄。

最近Electron 版本升级的速度想开挂一样迅速，最新版本都到41.x了。

Dioxus

Dioxus 是一个使用 Rust 编程语言构建跨平台应用程序的框架。只需一套代码库，即可构建可在 Web、桌面和移动平台上运行的应用程序。官方给出的示例如下：

基于 Dioxus，开发者可以使用类似于 JSX 的 RSX 写界面，运行性能超一流，且支持主流的平台，无需为不同平台编写适配代码，仅需切换运行器即可：

  • Web：编译为 Wasm 运行在浏览器；
  • 桌面：基于 Tauri/GTK 等底层，生成轻量原生应用；
  • 移动端：通过 Flutter 或 Android/iOS 原生绑定运行；
  • 终端：直接渲染为 TUI（文本界面）。

但是要求开发者具备一定的 Rust 编程能力，虽然可以交给 AI 来写，但目前终究还是对广大的 Web 开发者不友好。 Hello world 工程打包为桌面可执行程序（windows 下的 exe）后，体积为 12Mb，比 Tauri 大好多。

Electrobun

Electrobun 是最近势头正盛的开源框架，看这名字就知道是冲着 Electron 来的😄。

Electrobun 是一个轻量级的跨平台桌面应用开发框架，核心是将 Bun（新一代 JavaScript 运行时）与 Electron 生态的核心能力结合，旨在解决传统 Electron 应用体积大、启动慢的问题，同时保留 Electron 成熟的跨平台桌面开发体验。其本质是 “用 Bun 替换 Electron 中的 Node.js 层”，同时复用 Electron 的窗口 / 系统交互能力，兼顾轻量与成熟度。

** 💡 核心特点**

  1. 极致轻量 & 高性能

    • 基于 Bun 运行时，启动速度比传统 Electron 快 5-10 倍，应用打包体积可减少 50%+（基础应用仅几十兆）；
    • 保留 Bun 的原生优势：支持 TypeScript/JSX 零配置、内置 SQLite、WebKit 引擎优化等。

  2. 兼容 Electron 核心 API

    • 无需重构现有 Electron 代码，Electrobun 兼容 Electron 的核心 API（如 BrowserWindow、ipcMain、app 等），迁移成本极低；
    • 同时支持 Bun 的所有特性（如更快的文件操作、原生 ESM 支持、内置 HTTP 服务器）。

官方的性能对比

我用官方示例代码，打包后就没有看到 14Mb 左右的产物😂。Electrobun 打包后，体积跟 Electron 对比轻量了一丢丢吧，就是官方给的打包示例有点看不懂（如下图），打包后不是一个直接可以运行的单文件，这一点来说就不大符合我的要求。 在这里插入图片描述

未来生态完善可能会有所改善，目前还是不合适拿来做实际的项目。

Tauri Vue 开发模板

看看效果

Tauri 实践

配置 IO 可访问范围

Tauri2 把文件对话框、IO读写都移到单独的插件中，如 tauri-plugin-dialog、tauri-plugin-fs，这些插件需要授权才能在前端进行操作，下面是开放全盘权限的示例。

{
    "app": {
        "security": {
            "csp": null,
            "capabilities": [
                {
                    "identifier": "capability",
                    "windows": [ "main" ],
                    "permissions": [
                        "core:window:allow-set-title",
                        "dialog:allow-open",
                        "dialog:allow-save",
                        "fs:allow-stat",
                        "fs:allow-exists",
                        "fs:allow-read-dir",
                        "fs:allow-read-text-file",
                        "fs:allow-write-text-file",
                        "fs:allow-mkdir",
                        "fs:allow-copy-file",
                        "fs:allow-remove",
                        "fs:allow-rename",
                        {
                            "identifier": "fs:scope",
                            "allow": [ { "path": "**" } ]
                        },
                        "opener:allow-open-path",
                        {
                            "identifier": "opener:default",
                            "allow": [ { "path": "**" } ]
                        }
                    ]
                }
            ]
        }
    }
}

文件拖拽

关于 Tauri2 的拖拽文件，可以看这篇博文：解决Tauri2.x拖拽事件问题

要实现外部文件拖入到窗口，最佳实践是：

  1. 配置权限core:event:allow-listen
  2. 在页面中引入 import { listen } from "@tauri-apps/api/event"
  3. 监听tauri://drag-drop事件，获取对应的文件、事件坐标等
  4. 注意：要考虑屏幕的缩放噢，详见 window.devicePixelRatio

如果需要实时处理被拖动对象的视觉效果，可以通过监听 drag-over 事件。

avatar
文章
阅读
粉丝