应用端实验室桌面应用
00 / 00

桌面端快速开始

用 01MVP Tauri 示例连接现有 Hono/oRPC 后端

这页使用 products/01mvp/apps/desktop 作为实验室参考实现。做自己的桌面端时,先创建独立 desktop workspace,再把应用名、Bundle ID、origin、签名和发布配置改成自己的产品。

你将学到

  • 安装桌面端所需的全部环境依赖
  • 配置桌面端环境变量和后端 origin
  • 依次启动 Web/API、浏览器预览和 Tauri 原生窗口
  • 第一次跑起来后该检查哪些东西
  • 常见报错怎么排查

先把项目跑起来;名称、Bundle ID、图标、签名和发布配置可以随后逐项替换。

安装依赖

桌面模板需要 Node.js、Vite Plus、Rust 和 Tauri CLI。仓库已经在 package.json 里声明了 Tauri CLI,Rust 要你自己装。

先装项目依赖:

vp install

再确认 Rust 可用:

rustc --version
cargo --version

如果这两个命令跑不通,先按 Tauri prerequisites 装好 Rust 和系统依赖。

只想看 UI 和调 API?没有 Rust 也能跑浏览器预览。但如果要启动 Tauri 原生窗口,Rust 是必须的。

配置桌面端环境变量

复制模板文件:

cp products/01mvp/apps/desktop/.env.example products/01mvp/apps/desktop/.env.local

这里的 products/01mvp/apps/desktop 是参考路径;新产品应该换成自己的 desktop app 路径。

三个常用变量:

变量默认值用途
VITE_DESKTOP_APP_NAME01MVP Desktop窗口和页面里显示的应用名
VITE_DESKTOP_SERVER_URLhttp://localhost:7001/apiAPI、auth、oRPC 的基础地址
VITE_DESKTOP_WEB_URLhttp://localhost:7001打开网页、价格页或用户后台时使用

VITE_DESKTOP_* 会进入桌面前端 bundle。不要放数据库密码、支付密钥、邮件 secret 或 Better Auth secret。

确认后端 origin 配置

桌面端的浏览器预览默认跑在 http://localhost:7410。后端需要允许这个 origin,否则登录和受保护 API 会失败。

products/01mvp/packages/config/.env 里确认:

DESKTOP_ALLOWED_ORIGINS="http://localhost:7410,http://127.0.0.1:7410,tauri://localhost,http://tauri.localhost"

本地默认值已经覆盖常见开发场景。生产分发时,把实际桌面 origin 加进去。

启动 Web/API

先启动 Web/API,桌面端依赖它提供接口:

vpr @01mvp/product#dev

启动后会监听 http://localhost:7001,API 地址是 http://localhost:7001/api

启动桌面端

另开一个终端,先跑浏览器预览看看 UI:

vpr @01mvp/desktop#dev

浏览器打开 http://localhost:7410 就能看到桌面端页面。这个模式是普通浏览器页面,适合先看 UI、登录表单、API 状态和设置面板。浏览器里没有真实 Tauri runtime,模板会用 fallback 存偏好。

要启动真正的桌面窗口:

vpr @01mvp/desktop#tauri:dev

这会编译 Rust crate 并打开原生桌面窗口。托盘、app data 目录、Tauri commands 只能在这个模式里验证。

第一次跑起来后检查什么

打开桌面端,确认这几项都通了:

  • 页面能显示 API status
  • 登录表单能提交
  • 登录后能读到 account.profile
  • 设置面板能保存 API server URL 和 Web URL
  • Tauri 原生窗口里能打开 app data 目录
  • 退出并重新打开后,本地偏好仍然存在

常见问题

页面打开了,但 API status 挂了

先确认 Web/API 还在跑:

curl http://localhost:7001/api/rpc/health/live

没有响应就回到终端看看 Web/API 是不是报错了。有响应的话,检查 VITE_DESKTOP_SERVER_URL 是不是指向同一个服务。

登录成功后 profile 还是 401

通常是 origin 没被允许。逐项排查:

  1. DESKTOP_ALLOWED_ORIGINS 有没有包含桌面端 origin
  2. VITE_DESKTOP_SERVER_URL 是不是以 /api 结尾
  3. 服务端有没有重启过,新的 env 是不是已经生效

Tauri dev 编译报错

先跑 Rust 检查:

vpr @01mvp/desktop#tauri:check

如果是系统依赖缺了,回 Tauri prerequisites 按你的操作系统补装。

验证命令

全部跑一遍,确认桌面端项目状态健康:

vpr @01mvp/desktop#type-check
vpr @01mvp/desktop#lint
vpr @01mvp/desktop#test
vpr @01mvp/desktop#build
cargo check --manifest-path products/01mvp/apps/desktop/src-tauri/Cargo.toml

下一步

项目跑起来了,接下来去 项目结构 了解前端、runtime adapter、Rust commands 和配置的边界划分。

想和其他创造者交流?

这篇文档有问题?