桌面端快速开始
用 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_NAME | 01MVP Desktop | 窗口和页面里显示的应用名 |
VITE_DESKTOP_SERVER_URL | http://localhost:7001/api | API、auth、oRPC 的基础地址 |
VITE_DESKTOP_WEB_URL | http://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 没被允许。逐项排查:
DESKTOP_ALLOWED_ORIGINS有没有包含桌面端 originVITE_DESKTOP_SERVER_URL是不是以/api结尾- 服务端有没有重启过,新的 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 和配置的边界划分。
想和其他创造者交流?
这篇文档有问题?