Tauri 前端配置把任何前端框架“正确地”接进 Tauri（含 Vite/Next/Nuxt/Qwik/SvelteKit/Leptos/Trunk）

优质文章学习记录

— 5 min read

1. 配置清单：先把底层规则记住

把下面三条当作 Tauri 前端接入的硬规则：

  1. 只走静态路线：SSG / SPA / MPA
    Tauri 不原生支持基于服务端的方案（例如 SSR）。(Tauri)
  2. 移动端真机开发必须有“可被设备访问”的 dev server
    需要让 dev server 绑定到你的内网 IP（或按 Tauri CLI 提供的 host），否则 iOS/Android 真机加载不到页面。(Tauri)
  3. 保持标准的 Client ↔ API 模式
    不要把 SSR 那种“前端渲染与 API 混在一起”的混合模式搬进 Tauri（因为 Tauri 本身不是 Node runtime）。(Tauri)

2. Tauri 侧关键配置位：你最常改的是 build 这四个字段

无论你用什么前端，最终基本都要把这几项在 src-tauri/tauri.conf.json 配好：

  • build.devUrl：开发模式加载哪个 dev server 地址
  • build.frontendDist：打包时把哪个目录当作静态资源目录（dist/out/build 等）
  • build.beforeDevCommand：跑 tauri dev 前先执行什么（通常是 npm/pnpm/yarn dev）
  • build.beforeBuildCommand：跑 tauri build 前先执行什么（通常是 npm/pnpm/yarn build/generate）

官方在 Vite/Next/Nuxt/SvelteKit/Trunk 等指南里都是这个套路。(Tauri)

一个非常典型的（以 Vite 为例）：

{"build":{"beforeDevCommand":"pnpm dev","beforeBuildCommand":"pnpm build","devUrl":"http://localhost:5173","frontendDist":"../dist"}}

(Tauri)

3. 框架推荐配置

3.1 Vite（官方最推荐的 JS 方案）

官方明确：大多数 SPA 框架（React/Vue/Svelte/Solid）推荐用 Vite。(Tauri)

Tauri 配置（重点是 devUrl、frontendDist、两个 before 命令）：(Tauri)

{"build":{"beforeDevCommand":"pnpm dev","beforeBuildCommand":"pnpm build","devUrl":"http://localhost:5173","frontendDist":"../dist"}}

Vite 配置（移动端真机关键：吃 TAURI_DEV_HOST；并忽略 watching src-tauri；HMR 在真机时走 ws）：(Tauri)

import{ defineConfig }from'vite';const host = process.env.TAURI_DEV_HOST;exportdefaultdefineConfig({clearScreen:false,server:{port:5173,strictPort:true,host: host ||false,hmr: host ?{protocol:'ws', host,port:1421}:undefined,watch:{ignored:['**/src-tauri/**'],},},envPrefix:['VITE_','TAURI_ENV_*'],build:{target: process.env.TAURI_ENV_PLATFORM=='windows'?'chrome105':'safari13',minify:!process.env.TAURI_ENV_DEBUG?'esbuild':false,sourcemap:!!process.env.TAURI_ENV_DEBUG,},});

3.2 Next.js（必须静态导出）

核心结论就一句：Next.js 要用静态导出 output: 'export'，并把 out/ 作为 frontendDist。(Tauri)

Tauri 配置：

{"build":{"beforeDevCommand":"pnpm dev","beforeBuildCommand":"pnpm build","devUrl":"http://localhost:3000","frontendDist":"../out"}}

(Tauri)

Next 配置（两个很关键的坑位：images.unoptimized、开发态 assetPrefix）：(Tauri)

const isProd = process.env.NODE_ENV==='production';const internalHost = process.env.TAURI_DEV_HOST||'localhost';/** @type {import('next').NextConfig} */const nextConfig ={output:'export',images:{unoptimized:true},assetPrefix: isProd ?undefined:`http://${internalHost}:3000`,};exportdefault nextConfig;

3.3 Nuxt（SSG：关闭 SSR + generate）

Nuxt 指南同样强调：设置 ssr: false 走 SSG，并用 nuxi build/generate 产物接给 Tauri。(Tauri)

Tauri 配置（build 用 generate，dist 用 ../dist）：(Tauri)

{"build":{"beforeDevCommand":"pnpm dev","beforeBuildCommand":"pnpm generate","devUrl":"http://localhost:3000","frontendDist":"../dist"}}

Nuxt 配置里对移动端真机/开发体验做了几处“非常工程化”的增强：

  • devServer.host: '0' 让 dev server 可被其他设备发现
  • vite.envPrefix 把 TAURI_ 环境变量也暴露给前端
  • ignore: ['**/src-tauri/**'] 避免 watch 导致文件句柄过多等问题(Tauri)
exportdefaultdefineNuxtConfig({ ssr:false, devServer:{ host:'0'}, vite:{ clearScreen:false, envPrefix:['VITE_','TAURI_'], server:{ strictPort:true},}, ignore:['**/src-tauri/**'],});

3.4 Qwik（用 Static Adapter 做 SSG）

Qwik 这类偏 SSR 的框架接 Tauri，核心就是：走 SSG（Static adapter），产物目录用 dist/。(Tauri)

Tauri 配置示例（dist + devUrl 5173）：(Tauri)

{"build":{"devUrl":"http://localhost:5173","frontendDist":"../dist","beforeDevCommand":"pnpm dev","beforeBuildCommand":"pnpm build"}}

3.5 SvelteKit（static adapter + 关闭 SSR；prerender 要谨慎）

SvelteKit 官方指南点得很清楚：用 adapter-static 走 SSG/SPA，并把 build/ 作为 frontendDist。(Tauri)

更重要的是：如果你启用了 prerender，构建阶段的 load 函数拿不到 Tauri API；因此更推荐 SPA（不 prerender），让 load 只在 WebView 里执行。(Tauri)

Tauri 配置：

{"build":{"beforeDevCommand":"pnpm dev","beforeBuildCommand":"pnpm build","devUrl":"http://localhost:5173","frontendDist":"../build"}}

(Tauri)

SvelteKit 配置（fallback 到 index.html，配合 SPA 路由）：(Tauri)

import adapter from'@sveltejs/adapter-static';import{ vitePreprocess }from'@sveltejs/vite-plugin-svelte';const config ={preprocess:vitePreprocess(),kit:{adapter:adapter({fallback:'index.html'}),},};exportdefault config;

并在根布局关闭 SSR：(Tauri)

exportconst ssr =false;

3.6 Rust 前端（Leptos / Trunk）：WASM 工程的两个关键点

Leptos 与 Trunk 的指南里，除了“走 SSG”之外，有两个移动端相关的关键配置：

  • serve.ws_protocol = "ws"：确保热更新 websocket 在移动端连接正常
  • withGlobalTauri: true：把 Tauri API 挂到 window.__TAURI__，便于 wasm-bindgen 引入/调用(Tauri)

Leptos（Trunk）示例：(Tauri)

src-tauri/tauri.conf.json

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

Trunk.toml

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

(Tauri)

4. 移动端真机开发：别硬写 0.0.0.0，优先用 TAURI_DEV_HOST

Tauri 在移动端开发时会通过 TAURI_DEV_HOST 告诉你“应该监听哪个地址”，尤其是 iOS 真机存在更安全的设备地址/隧道地址选择流程。(Tauri)

结论是：

  • 你的 dev server host 要能读取 process.env.TAURI_DEV_HOST
  • HMR websocket 也要按 host 调整（Vite 官方示例已给出）(Tauri)

如果你是用 create-tauri-app 创建的项目，官方也说明：移动端所需的 dev server 配置通常已经帮你配好了。(Tauri)

5. 常见“白屏/资源 404”排坑清单

这些坑我建议你在团队 wiki 里直接当“发布前检查”：

  • 资源路径必须在打包后仍可解析
    很多白屏本质是“静态资源路径错了”，尤其你给 Vite/框架配置了自定义 base path 时，dev 正常、build 后 WebView 找不到 js/css（看起来像 MIME 错/404）。(GitHub)
  • 元框架在 dev 模式下可能需要显式配置 asset 前缀
    Next.js 的 assetPrefix 就是为了让 dev server 下资源解析正确（尤其移动端/非 localhost 情况）。(Tauri)
  • SPA 路由要有 fallback
    SvelteKit adapter-static 的 fallback: 'index.html' 就是典型做法，否则刷新深层路由可能直接 404。(Tauri)

6. 调试体验提醒：Tauri API 只能在 App 窗口里用

一旦你开始调用 Tauri API，你的前端页面就不能“直接用系统浏览器打开”来完全复现了，因为这些 API 只在 Tauri WebView 容器里生效。(Tauri)

如果你特别依赖浏览器 DevTools 的工作流，官方建议用 tauri-invoke-http 把调用桥接成 HTTP 服务来调试。(Tauri)

Read more

具身神经-机器人运控通讯架构与实现系列

具身智能热潮之下，大量企业投身具身行业。在机器人本体控制方案上各家争鸣，但是试错路径太长，不少团队会在底层控制方案上走大量的弯路，导致资源浪费、项目延期甚至破产。 以第一性原则，探索当前具身机器人通讯架构实现最优解，加速具身机器人行业底层控制（通讯）系统技术方向收敛。尽可能帮助机器人本体系统工程师减少试错。 本系列仅针对机器人本体控制系统底层通讯部分：小脑<--->执行器/传感器之间的架构和具体实现。 gitee链接：https://gitee.com/Lenz_s_law/embodied-nerve 博文汇总 欢迎投稿 通讯架构分析篇 * MIT开源四足机器狗通讯架构分析 * 智元灵犀X1通讯分析1-整机通讯架构 * 智元灵犀X1通讯分析2-CANFD性能优化 * 宇树G1主控拆解分析 * RS485、CAN/FD、EtherCAT三种主流机器人总线方案分析 CAN/FD技术篇 * CAN/FD总线性能分析-机器人应用 * 机器人CAN/FD总线通讯架构设计 * 机器人CAN/FD接口关键性能指标 * 机器人CAN/FD接口扩展/实现方案
Ubuntu搭建PX4无人机仿真环境(5) —— 仿真环境搭建(以Ubuntu 22.04,ROS2 Humble,Micro XRCE-DDS Agent为例)

Ubuntu搭建PX4无人机仿真环境(5) —— 仿真环境搭建(以Ubuntu 22.04,ROS2 Humble,Micro XRCE-DDS Agent为例)

目录 * 前言 * 1. 准备 * 1.1 下载 PX4 源码 * 方式一： * 方式二： * 1.2 安装仿真依赖 * 1.3 安装 Gazebo * 2. 安装 Micro XRCE-DDS Agent * 3. 编译 PX4 * 4. 通信测试 * 5. 官方 offboard 程序 * 6. offboard 测试 * 参考 前言 本教程基于 ROS2 ，在搭建之前，需要把 ROS2、QGC 等基础环境安装配置完成。但是这块的资料相比较于 ROS1 下的少很多，不利于快速上手和后期开发，小白慎选！ 小白必看：
win11本地部署openclaw实操第2集-让小龙虾具有telegram机器人能力和搜索网站能力

win11本地部署openclaw实操第2集-让小龙虾具有telegram机器人能力和搜索网站能力

1 按照第一集的部署完成后，我们就开始考虑给小龙虾增加telegram机器人和搜索网站能力，实现效果如下： 2 telegram机器人能力部署 C:\Users\Administrator.openclaw的配置文件openclaw.json 增加一段内容 "channels":{"telegram":{"enabled": true, "dmPolicy":"pairing", "botToken":"你的telegram机器人的token", "groupPolicy":"allowlist", "streamMode":"partial", "network":{"
汇川机器人软件RobotLab常规操作

汇川机器人软件RobotLab常规操作

一.权限管理注意事项 1.1 软件登录权限管理 连接上软件后，修改轴参数、点位数据需要权限。点击人物图标，登录对应的权限，管理员权限登录密码6个0。 1.2机器人控制权限管理 点击“锁”，打开机器人控制权配置页面。 选择“InoRoboLabt”，机器人受编程软件控制，使用软件可手动移动点位、示教位置信息。 选择“远程IO单元”，机器人受外部设备控制如PLC、上位机，机器人进入自动模式，收到交互信号就按照程序执行。 选择“远程以太网客户端”，机器人受远程客户短控制，用于查找问题、远程调试。 二、 使用过渡点注意事项 程序中点到点直线运动会有机构干涉或有安全风险时，使用过渡点在运动规避风险。 使用过渡点时，注意指令的工具坐标系，选择正确的Wobj工具好，否则运动出错有撞机风险。 如下图所示为例，wobj0为A工位，wobj1为B工位,注意在“轴控制面板”中选择对应工具坐标号 三、使用全局点位移动注意事项 双击左侧“P.