Vue 3 用 Tauri 打包桌面应用：把 Web 工程装进原生窗口并调用系统能力

为什么是 Tauri 而不是 Electron

Electron 把整个 Chromium 打进包里，体积动辄上百兆。Tauri 复用系统自带的 WebView，后端用 Rust 写，安装包往往只有几兆。前端可以照常用 Vue 3，需要访问文件、通知、系统托盘时，通过 Tauri 的命令机制调用 Rust，而不必引入 Node 运行时。

初始化一个 Tauri + Vue 工程

用官方脚手架先把 Vue 工程建起来，再追加 Tauri 集成。前端和桌面壳是两套配置，但开发时 Tauri 会启动一个 WebView 指向 Vite 的 dev server。

npm create vue@latest my-app
cd my-app
npm install
npm install -D @tauri-apps/cli
npx tauri init

配置 tauri.conf.json

这个文件决定窗口尺寸、标题，以及开发期前端跑在哪个地址。生产构建时 Tauri 会把 Vite 的产物打包进二进制。

{
  "build": {
    "devUrl": "http://localhost:5173",
    "frontendDist": "../dist",
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build"
  },
  "tauri": {
    "windows": [
      {
        "title": "我的工具箱",
        "width": 1000,
        "height": 700,
        "resizable": true
      }
    ],
    "bundle": {
      "identifier": "com.example.myapp",
      "targets": "all"
    }
  }
}

从 Vue 调用 Rust 命令

Rust 侧用 #[tauri::command] 标注一个函数，前端就能通过 invoke 调用它。参数和返回都会自动做 JSON 序列化。

// src-tauri/src/main.rs
#[tauri::command]
fn greet(name: String) -> String {
    format!("你好，{}！", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("启动失败");
}

// Vue 组件
import { invoke } from '@tauri-apps/api/core';

async function sayHi() {
  const msg = await invoke('greet', { name: '张三' });
  console.log(msg); // 你好，张三！
}

调用系统能力：读文件

文件、对话框、通知等走 Tauri 的 API 插件。下面用 @tauri-apps/plugin-fs 读取用户选中的文件内容，不经过前端任意路径访问，安全边界由 Rust 守住。

import { open } from '@tauri-apps/plugin-dialog';
import { readTextFile } from '@tauri-apps/plugin-fs';

async function pickAndRead() {
  const path = await open({ multiple: false });
  if (!path) return;
  const text = await readTextFile(path as string);
  console.log('文件内容长度：', text.length);
}

构建与体积对比

开发完用 build 命令产出平台安装包。一个只做本地笔记的 Vue 应用，Tauri 包通常在 5 到 10 兆，同等功能的 Electron 包往往超过 80 兆。

npx tauri build

小结

Tauri 让前端工程师用熟悉的 Vue 3 写界面，把系统级能力交给少量 Rust 代码。它适合工具类、内部系统、轻量桌面客户端这类对体积和启动速度敏感的场景。代价是要写一点 Rust，但命令接口很薄，上手成本比维护一整套 Electron 主进程逻辑低得多。