Tuari 项目结构

JavaScript 项目位于顶层 src，Rust 项目位于 src-tauri 目录下。

src-tauri 内部机构

  • tauri.conf.json: Tauri 主配置文件，包含从应用程序标识符到开发服务器 URL 的所有内容。该文件是 Tauri CLI 用于查找 Rust 项目的标记。
    — 标记文件

  • capabilities/: Tauri 读取能力的默认文件夹（给权限，给能力，在此处允许命令才能被调用）
    — 程序运行所需的权限

  • icons/: tauri icon 命令的默认输出目录，通常在 tarui.conf.json > bundle > icon 中引用，并用于应用程序的图标。
    — 应用程序图标

  • build.rs: 包含 tauri_bind::build()，用于 Tauri 的构建系统。
    — 用于 Tauri 构建系统

  • src/lib.rs: 包含 Rust 代码和移动端入口点（标记为 #[cfg_attr(mobile, tauri::mobile_entry_point)] 的函数），我们不直接在 main.rs 中编写代码的原因是，在移动端构建中，我们会将您的应用程序编译成一个库，并通过平台框架加载它们。
    — 移动端入口点，不直接在此文件中编写代码，因为构建移动端中，将应用程序编译成一个库

  • src/main.rs: 是桌面应用程序的主要入口点，我们在 main 中运行 tauri_app_lib::run() 以使用与移动端相同的入口点，因此为简单起见请勿修改此文件，请修改 lib.rs。
    — 桌面程序入口点

Tauri 工作方式

工作方式类似于静态 Web 主机，其构建方式是您首先将 JavaScript 项目编译为静态文件，然后编译 Rust 项目，该项目将这些静态文件捆绑一起，因此 JavaScript 项目的设置与构建静态网站基本相同。

只使用 Rust 代码，只需要删除所有其他内容，并将 src-tauri/ 文件夹用作顶层项目或 Rust 工作区的一个成员。

Tauri 前端配置

Leptos

Leptos 是一个基于 Rust 的Web框架。指南截至 Leptos 0.6 版本都是准确的

清单

  • 使用 SSG, Tauri 不正式支持基于服务器的解决方案。
  • 使用 serve.ws_protocol = “ws”, 以便热重载 websocket 可以正确连接以进行移动开发。
  • 启用 withGlobalTauri 以确保 Tauri API 在window.TAURI 变量中可用，并且可以使用 wasm-bindgen导入。

示例配置

  • 更新 Tauri 配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14

src-tauri/tauri.conf.json
{
    "build": {
        "deforeDevCommand": "trunk serve",
        "devUrl": "https://:1420",
        "beforeBuildCommand": "trunk build",
        "distDir": "../dist",
    }
    "app": {
        "withGlobalTauri": true
    }
}

  • 更新 Trunk 配置
1
2
3
4
5
6
7
8
9
10
11
12
13

Trunk.toml
[build]
target = "./index.html"

[watch]
ignore = ["./src-tauri"]

[serve]
port = 1420
open = false
ws_protocol = "ws"

Next.js

Next.js 是一个基于 React 的元框架。指南适用于 Next.js 14.2.3 版本

清单

  • 通过设置 output: ‘export’ 使用静态导出。 Tauri 不支持基于服务器的解决方案。
  • 在 tauri.conf.json 中使用 out 目录作为 frontendDist。

示例配置

  • 更新 Tauri 配置
    (npm, yarn, pnpm, deno)
1
2
3
4
5
6
7
8
9
10
11

src-tauri/tauri.conf.json
{
    "build": {
        "beforeDevCommand": "npm(yarn,pnpm) run dev" || "deno task dev",
        "beforeBuildCommand": "npm(yarn,pnpm) run build" || "deno task build",
        "devUrl": "https://:3000",
        "frontendDist": "../out"
    }
}

  • 更新 Next.js 配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
next.config.mjs

const isProd = process.env.NODE_ENV === 'production';

const internalHost = process.env.TAURI_DEV_HOST || 'localhost';

/** @type {import('next').NextConfig} */
const nextConfig = {
    // Ensure Next.js uses SSG instead of SSR
    // https://nextjs.net.cn/docs/pages/building-your-application/deploying/static-exports
    output: 'export',
    // Note: This feature is required to use the Next.js Image component in SSG mode.
    // See https://nextjs.net.cn/docs/messages/export-image-api for different workarounds.
    images: {
        unoptimized: true,
    },
    // Configure assetPrefix or else the server won't properly resolve your assets.
    assetPrefix: isProd ? undefined : `http://${internalHost}:3000`,
};

export default nextConfig;

  • 更新 package.json 配置
1
2
3
4
5
6
7
8
9
package.json
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "tauri": "tauri"
}

Nuxt

Nuxt 是一个用于 Vue 的元框架。指南适用于 Nuxt 3.17。

清单

  • 通过设置 ssr: false 使用 SSG。 Tauri 不支持基于服务器的解决方案。
  • 在 tauri.conf.json 中使用默认的 ../dist 作为 frontendDist。
  • 使用 nuxi build 编译
  • 在 nuxt.config.ts 中设置 telemetry: false 禁用遥测（可选）

示例配置

  • 更新 Tauri 配置
    (npm, yarn, pnpm, deno)
1
2
src-tauri/tauri.conf.json
与 Next.js 相同的更新配置
  • 更新 Nuxt 配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  // (optional) Enable the Nuxt devtools
  devtools: { enabled: true },
  // Enable SSG
  ssr: false,
  // Enables the development server to be discoverable by other devices when running on iOS physical devices
  devServer: {
    host: '0',
  },
  vite: {
    // Better support for Tauri CLI output
    clearScreen: false,
    // Enable environment variables
    // Additional environment variables can be found at
    // https://v2.tauri.org.cn/reference/environment-variables/
    envPrefix: ['VITE_', 'TAURI_'],
    server: {
      // Tauri requires a consistent port
      strictPort: true,
    },
  },
  // Avoids error [unhandledRejection] EMFILE: too many open files, watch
  ignore: ['**/src-tauri/**'],
});

Qwik

Qwik Web 框架是一个为构建高性能的 Web 应用程序而设计的前端 JavaScript框架。

清单

  • 使用 SSG。Tauri 不支持基于服务器的解决方案。
  • tauri.conf.json 中使用 dist/ 作为 frontendDist。

示例配置

  • 创建新的 Qwik 应用
1
2
3
npm || yarn || pnpm create qwik@latest
(deno)deno run -A npm:create-qwik@latest
cd <PROJECT>
  • 安装 static adapter
1
2
npm || yarn || pnpm run qwik add static
(deno)deno task qwik add static
  • 将 Tauri CLI 添加到项目
1
2
npm || yarn || pnpm install -D @tauri-apps/cli@latest
(deno)deno add -D npm:@tauri-apps/cli@latest
  • 启动新的 Tauri 项目
1
2
npm || yarn || pnpm run tauri init
(deno)deno task tauri init
  • Tauri 配置
1
2
3
4
5
6
7
8
9
tauri.conf.json
{
  "build": {
    "devUrl": "https://:5173"
    "frontendDist": "../dist",
    "beforeDevCommand": "npm || yarn || pnpm run dev || deno task dev",
    "beforeBuildCommand": "npm || yarn || pnpm run build || deno task build"
  }
}
  • 启动 tauri 项目
1
npm || yarn || pnpm run tauri dev || deno tasj tauri dev

Trunk

清单

  • 使用 SSG，Tauri 不正式支持基于服务器的解决方案。
  • 使用 serve.ws_protocol = “ws” 以便热重载 websocket 可以正确连接进行移动开发。
  • 启用 withGlobalTauri 以确保 Tauri API 在 window.TAURI 变量中可用，并且可以使用 wasm-bindgen 导入。

示例配置

  • 更新 Tauri 配置
1
2
3
4
5
6
7
8
9
10
11
12
tauri.conf.json
{
  "build": {
    "beforeDevCommand": "trunk serve",
    "beforeBuildCommand": "trunk build",
    "devUrl": "https://:8080",
    "frontendDist": "../dist"
  },
  "app": {
    "withGlobalTauri": true
  }
}
  • 更新 Tauri 配置
1
2
3
4
5
6
Trunk.toml
[watch]
ignore = ["./src-tauri"]

[serve]
ws_protocol = "ws"

Vite

Vite 是一款旨在为现代 Web 项目提供更快、更精简开发体验的构建工具。

清单

  • 在 src-tauri/tauri.conf.json 中将 ../dist 用作 frontendDist。
  • 当设置为在 iOS 物理设备上运行时，将 process.env.TAURI_DEV_HOST 用作开发服务器主机IP。

示例配置

  • 更新 Tauri 配置
    如果 package.json 中有以下 dev 和 build 脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  }
}
可以配置 Tauri CLI 使用 Vite 开发服务器和 dist 文件夹，并使用钩子自动运行 Vite 脚本

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "https://:5173",
    "frontendDist": "../dist"
  }
}
  • 更新 Vite 配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { defineConfig } from 'vite';

const host = process.env.TAURI_DEV_HOST;

export default defineConfig({
  // prevent vite from obscuring rust errors
  clearScreen: false,
  server: {
    // make sure this port matches the devUrl port in tauri.conf.json file
    port: 5173,
    // Tauri expects a fixed port, fail if that port is not available
    strictPort: true,
    // if the host Tauri is expecting is set, use it
    host: host || false,
    hmr: host
      ? {
          protocol: 'ws',
          host,
          port: 1421,
        }
      : undefined,

    watch: {
      // tell vite to ignore watching `src-tauri`
      ignored: ['**/src-tauri/**'],
    },
  },
  // Env variables starting with the item of `envPrefix` will be exposed in tauri's source code through `import.meta.env`.
  envPrefix: ['VITE_', 'TAURI_ENV_*'],
  build: {
    // Tauri uses Chromium on Windows and WebKit on macOS and Linux
    target:
      process.env.TAURI_ENV_PLATFORM == 'windows'
        ? 'chrome105'
        : 'safari13',
    // don't minify for debug builds
    minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false,
    // produce sourcemaps for debug builds
    sourcemap: !!process.env.TAURI_ENV_DEBUG,
  },
});

为移动端做准备

Tauri 的移动端端口要求项目输出一个共享库。
如果应用程序面向移动端，则需将 crate 更改为除了桌面可执行文件之外，还生成这种类型的 artifact。

    1. 更改 Cargo 清单以生成库。追加以下块
1
2
3
4
src-tauri/Cargo.toml
[lib]
name = "app_lib"
crate-type = ["staticlib", "cdylib", "rlib"]
    1. 将 src-tauri/src/main.rs 重命名为 src-tauri/src/lib.rs。此文件将由桌面和移动端目标共享。
    1. 将 lib.rs 中的 main 函数头重命名为以下内容
1
2
3
4
5
6
7
src-tauri/src/lib.rs
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    // your code here
}

tauri::mobile_entry_point 宏将函数准备好在移动端执行
    1. 重新创建调用共享运行函数的 main.rs 文件
1
2
3
4
5
6
src-tauri/src/main.rs
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
  app_lib::run();
}