Leptos + Tauri 2 前端配置Trunk + SSG + 移动端热重载一次打通(Leptos 0.6 口径)

1. 三条 Checklist:每一条都对应一个真实的坑

1.1 用 SSG(别走 SSR)

Tauri 的工作方式更像“静态站点宿主”:你给它一份静态资源目录(HTML/CSS/JS/WASM),它在 WebView 里加载并运行。官方明确:Tauri 不官方支持基于服务器的方案(SSR),因此要用 SSG/SPA/MPA 这类静态路线。 (Tauri)

这对 Leptos 意味着:在 Tauri 里通常跑的是 WASM 前端(客户端渲染),而不是把 Leptos 的服务端渲染端也一起塞进去。

1.2 serve.ws_protocol = "ws":移动端热重载的关键开关

在移动端开发时(Android/iOS 真机或模拟器),热重载 websocket 更容易因为协议/网络环境出现连接问题。官方建议在 Trunk 里显式设置:

  • ws_protocol = "ws"

确保热重载 websocket 能正常连上。 (Tauri)

1.3 开启 withGlobalTauri:让 window.__TAURI__ 可用,WASM 才好“抓”到 Tauri API

Leptos(WASM)要调用 Tauri API,最常见的桥接方式之一就是通过浏览器全局对象拿到 window.__TAURI__,再用 wasm-bindgen 或 JS interop 访问。官方要求在 Tauri 配置里打开:

  • app.withGlobalTauri = true

这样 window.__TAURI__ 才会被注入。 (Tauri)

2. 示例配置 1:src-tauri/tauri.conf.json(告诉 Tauri:怎么跑 Trunk、资源在哪)

把下面这段放到 src-tauri/tauri.conf.json(或合并进你的配置):

{"build":{"beforeDevCommand":"trunk serve","devUrl":"http://localhost:1420","beforeBuildCommand":"trunk build","frontendDist":"../dist"},"app":{"withGlobalTauri":true}}

这段配置分别解决什么:

  • beforeDevCommand: trunk serve
    你执行 cargo tauri dev 时,Tauri 会先帮你启动 Trunk 的开发服务器。
  • devUrl: http://localhost:1420
    Tauri 开发模式加载的页面地址就是这个(Trunk 默认端口常用 1420)。
  • beforeBuildCommand: trunk build
    你执行 cargo tauri build 时,先把 Leptos 编译成静态资源。
  • frontendDist: ../dist
    Trunk build 的输出目录(注意这是相对 src-tauri/ 的路径,所以通常是 ../dist)。
  • withGlobalTauri: true
    注入 window.__TAURI__,方便 WASM/vanilla JS 访问。 (Tauri)

3. 示例配置 2:Trunk.toml(Trunk 怎么 build、怎么 serve、怎么热重载)

在项目根目录创建/修改 Trunk.toml

[build] target = "./index.html" [watch] ignore = ["./src-tauri"] [serve] port = 1420 open = false ws_protocol = "ws" 

这里的重点:

  • [build].target = "./index.html"
    指定构建入口页面(Trunk 以它为入口组织资源与 wasm 输出)。
  • [watch].ignore = ["./src-tauri"]
    避免 Trunk 监听 Rust/Tauri 工程目录导致无意义的重编译或文件句柄压力(特别是 Windows/大型工程时会明显)。
  • [serve].ws_protocol = "ws"
    移动端热重载稳定性的关键项。 (Tauri)

4. 开发与构建:你实际只需要记住两条命令

开发(桌面):

cargo tauri dev 

发布构建:

cargo tauri build 

因为你已经在 tauri.conf.json 里配置了 beforeDevCommand/beforeBuildCommand,所以通常不需要你手动先跑 trunk serve/build

5. WASM 侧怎么用 Tauri API(思路)

开启 withGlobalTauri 后,window.__TAURI__ 会存在。官方 JS API 文档也明确:使用全局对象需要这个开关。 (Tauri)

在 Leptos/WASM 里常见做法是:

  • wasm-bindgen / web-syswindow 上取 __TAURI__
  • 再调用你需要的模块(例如 event、window、path、plugin 等)

如果你更偏工程化,也可以在前端用一层 thin wrapper:把需要的 Tauri 能力封装成少量 JS 函数,再让 WASM 调这些函数,边界更清晰、类型更可控。

6. 常见问题速查

  • 启动后白屏,但浏览器访问 http://localhost:1420 正常
    优先检查 tauri.conf.json 里的 devUrl 端口是否与 Trunk 一致,以及是否启动了 trunk serve(看终端输出)。
  • 热重载在移动端不工作
    先确认 Trunk.tomlws_protocol = "ws" 已设置。 (Tauri)
  • WASM 里拿不到 window.__TAURI__
    检查 app.withGlobalTauri 是否为 true,并确认你是在 Tauri 窗口里运行(不是纯浏览器环境)。 (Tauri)

Read more

【OpenClaw从入门到精通】第10篇:OpenClaw生产环境部署全攻略:性能优化+安全加固+监控运维(2026实测版)

【OpenClaw从入门到精通】第10篇:OpenClaw生产环境部署全攻略:性能优化+安全加固+监控运维(2026实测版)

摘要:本文聚焦OpenClaw从测试环境走向生产环境的核心痛点,围绕“性能优化、安全加固、监控运维”三大维度展开实操讲解。先明确生产环境硬件/系统选型标准,再通过硬件层资源管控、模型调度策略、缓存优化等手段提升响应速度(实测响应效率提升50%+);接着从网络、权限、数据三层构建安全防护体系,集成火山引擎安全方案拦截高危操作;最后落地TenacitOS可视化监控与Prometheus告警体系,配套完整故障排查清单和虚拟实战案例。全文所有配置、代码均经实测验证,兼顾新手入门实操性和进阶读者的生产级部署需求,帮助开发者真正实现OpenClaw从“能用”到“放心用”的跨越。 优质专栏欢迎订阅! 【DeepSeek深度应用】【Python高阶开发:AI自动化与数据工程实战】【YOLOv11工业级实战】 【机器视觉:C# + HALCON】【大模型微调实战:平民级微调技术全解】 【人工智能之深度学习】【AI 赋能:Python 人工智能应用实战】【数字孪生与仿真技术实战指南】 【AI工程化落地与YOLOv8/v9实战】【C#工业上位机高级应用:高并发通信+性能优化】 【Java生产级避坑指南:

By Ne0inhk
ARM Linux 驱动开发篇--- Linux 并发与竞争实验(互斥体实现 LED 设备互斥访问)--- Ubuntu20.04互斥体实验

ARM Linux 驱动开发篇--- Linux 并发与竞争实验(互斥体实现 LED 设备互斥访问)--- Ubuntu20.04互斥体实验

🎬 渡水无言:个人主页渡水无言 ❄专栏传送门: 《linux专栏》《嵌入式linux驱动开发》《linux系统移植专栏》 ❄专栏传送门: 《freertos专栏》《STM32 HAL库专栏》 ⭐️流水不争先,争的是滔滔不绝  📚博主简介:第二十届中国研究生电子设计竞赛全国二等奖 |国家奖学金 | 省级三好学生 | 省级优秀毕业生获得者 | ZEEKLOG新星杯TOP18 | 半导纵横专栏博主 | 211在读研究生 在这里主要分享自己学习的linux嵌入式领域知识;有分享错误或者不足的地方欢迎大佬指导,也欢迎各位大佬互相三连 目录 前言  一、实验基础说明 1.1、互斥体简介 1.2 本次实验设计思路 二、硬件原理分析(看过之前博客的可以忽略) 三、实验程序编写 3.1 互斥体 LED 驱动代码(mutex.c) 3.2.1、设备结构体定义(28-39

By Ne0inhk
Flutter for OpenHarmony:swagger_dart_code_generator 接口代码自动化生成的救星(OpenAPI/Swagger) 深度解析与鸿蒙适配指南

Flutter for OpenHarmony:swagger_dart_code_generator 接口代码自动化生成的救星(OpenAPI/Swagger) 深度解析与鸿蒙适配指南

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net 前言 后端工程师扔给你一个 Swagger (OpenAPI) 文档地址,你会怎么做? 1. 对着文档,手写 Dart Model 类(容易写错字段类型)。 2. 手写 Retrofit/Dio 的 API 接口定义(容易拼错 URL)。 3. 当后端修改了字段名,你对着报错修半天。 这是重复劳动的地狱。 swagger_dart_code_generator 可以将 Swagger (JSON/YAML) 文件直接转换为高质量的 Dart 代码,包括: * Model 类:支持 json_serializable,带 fromJson/

By Ne0inhk
Linux 开发别再卡壳!makefile/git/gdb 全流程实操 + 作业解析,新手看完直接用----《Hello Linux!》(5)

Linux 开发别再卡壳!makefile/git/gdb 全流程实操 + 作业解析,新手看完直接用----《Hello Linux!》(5)

文章目录 * 前言 * make/makefile * 文件的三个时间 * Linux第一个小程序-进度条 * 回车和换行 * 缓冲区 * 程序的代码展示 * git指令 * 关于gitee * Linux调试器-gdb使用 * 作业部分 前言 做 Linux 开发时,你是不是也遇到过这些 “卡脖子” 时刻?写 makefile 时,明明语法没错却报错,最后发现是依赖方法行没加 Tab;想提交代码到 gitee,记不清 git add/commit/push 的 “三板斧”,还得反复搜教程;用 gdb 调试程序,输了命令没反应,才想起编译时没加-g生成 debug 版本;甚至连写个进度条,都搞不懂\r和\n的区别,导致进度条乱跳…… 其实这些问题,

By Ne0inhk