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

用 Web 技术构建跨平台应用：Capacitor 完全指南

开篇的碎碎念：自从发现了capacitor，我就一直在用！不用像 Flutter 那样配置一堆环境，也不用学习新的 UI 写法，直接用前端三件套就能打包原生 App。简直是降维打击！那么接下来就开始capacitor的学习吧！！！ 目录 速成版 1. 什么是 Capacitor？         1.1 定义与背景         1.2 为什么叫 Capacitor？         1.3 发展历程         1.4 核心理念 2. Capacitor vs 其他跨平台方案         2.1 横评对比         2.2 为什么选择 Capacitor？ 3. Capacitor 核心架构         3.1 架构图         3.2

Altium Designer导入DXF/DWG文件常见问题与实战解决方案

1. 导入失败：版本兼容性与文件损坏问题 我在使用Altium Designer导入DXF/DWG文件时，最常遇到的就是导入失败的情况。软件弹窗提示"由于文件版本不兼容或文件损坏而无法打开"，这种情况特别让人头疼，尤其是赶项目的时候。 根本原因在于CAD和Altium Designer之间的版本鸿沟。AutoCAD每年都会推出新版本，而Altium Designer的更新节奏跟不上，这就导致了高版本的DWG文件在AD中无法识别。我实测过，AD 16.1版本最高只能兼容到AutoCAD 2013格式，再新的版本就会报错。 解决方案其实很简单：在AutoCAD中另存为低版本格式。我建议保存为2004或2007版本的DXF文件，这两个版本在兼容性方面表现最稳定。具体操作：在AutoCAD中打开文件后，点击"另存为"，在文件类型中选择"AutoCAD 2004/LT2004 DXF (*.dxf)"。这个办法我用了十年，几乎能解决90%的导入失败问题。 如果保存为低版本后仍然无法导入，可能是文件本身损坏了。这时候可以在AutoCAD中使用RECOVER命令修复文件，然后再重新保存为低版
快学快用系列：一文学会java后端WebApi开发

快学快用系列：一文学会java后端WebApi开发

文章目录 * 第一部分：Web API开发基础概念 * 1.1 什么是Web API * 1.2 RESTful API设计原则 * 第二部分：开发环境搭建 * 2.1 环境要求 * 2.2 创建Spring Boot项目 * 2.3 配置文件 * 第三部分：项目架构设计 * 3.1 分层架构 * 3.2 包结构设计 * 第四部分：数据模型设计 * 4.1 实体类设计 * 4.2 DTO设计 * 第五部分：数据访问层实现 * 5.1 Repository接口 * 5.2 自定义Repository实现 * 第六部分：业务逻辑层实现

【Web】深入解析C3P0反序列化漏洞——Hex字节码加载与防御策略

1. C3P0反序列化漏洞概述 C3P0作为Java生态中广泛使用的JDBC连接池组件，其反序列化漏洞近年来在安全领域备受关注。这个漏洞的特殊之处在于，它允许攻击者在不出网（无需外部网络连接）的情况下，通过精心构造的Hex字节码实现远程代码执行。我在实际渗透测试中多次遇到这个漏洞，发现它常与Fastjson、Jackson等流行框架组合出现，形成完整的攻击链。 漏洞的核心在于WrapperConnectionPoolDataSource类对userOverridesAsString属性的处理机制。当这个属性以"HexAsciiSerializedMap"开头时，C3P0会将其后的十六进制字符串转换为字节数组并进行反序列化操作。这种设计原本是为了支持连接池配置的灵活存储，却意外成为了安全突破口。 2. Hex字节码加载机制深度解析 2.1 漏洞触发流程分析 让我们通过一个真实案例来理解漏洞触发过程。去年在某次企业安全评估中，我发现一个使用Fastjson 1.2.47的Web服务，配合C3P0 0.9.5.2版本，形成了完美的攻击面。攻击者只需要发送如下JSON数据： {