Tauri 2 创建项目全流程create-tauri-app 一键脚手架 + Tauri CLI 手动接入

1. 你应该选哪条路

路线 A：create-tauri-app（推荐新项目）

适合：

• 你要从零开始
• 想最快跑起来一个可用的 Tauri 工程
• 想用官方维护的模板（稳定、省心）

优势：

• 交互式选择项目名、包管理器、框架模板
• 会自动提示你系统缺哪些依赖
• 产出结构规整，适合团队协作

路线 B：Manual Setup（Tauri CLI 初始化到现有项目）

适合：

• 你已经有一个前端项目（Vite/Next/Nuxt/SvelteKit 等）
• 你希望前端工程保持原样，只“加一层 Tauri 外壳”
• 你想完全掌控 dev server、build 命令和资源目录

优势：

• 对现有工程侵入性小
• 适配各种前端脚手架与 monorepo

2. create-tauri-app：一键创建项目

2.1 支持哪些官方模板

create-tauri-app 目前内置了这些模板（官方维护）：

• Vanilla（纯 HTML/CSS/JS，不依赖框架）
• Vue、Svelte、React、SolidJS、Angular、Preact
• Yew、Leptos、Sycamore（Rust 前端生态）
  另外也可以从 Awesome Tauri 找社区模板，或者自己扩展模板。

2.2 运行脚手架命令

在你想创建项目的目录里执行（Linux/macOS 推荐 Bash，Windows 推荐 PowerShell）：

sh <(curl https://create.tauri.app/sh)

然后跟着提示一路选下去即可。

2.3 交互式选项怎么选才不踩坑

你会看到几类关键选择：

① 项目名与 Identifier（包名）

• Project name：工程目录名与默认显示名
• Identifier：类似 com.company.app 的唯一标识（移动端更敏感，建议提前按公司域名规划）

示例提示类似：

• ? Project name (tauri-app) ›
• ? Identifier (com.tauri-app.app) ›

建议：

• 团队/产品线统一命名规则：com.company.product 或 com.company.department.product
• Identifier 一旦发版，后期迁移成本高（尤其移动端），别随便填

② 前端语言生态（这一步很关键）

create-tauri-app 会让你先选“前端开发语言/生态”：

• Rust（cargo）
• TypeScript / JavaScript（pnpm/yarn/npm/bun）
• .NET（dotnet，Blazor）

怎么选：

• 绝大多数团队：选 TypeScript/JavaScript（配 React/Vue/Svelte 等）
• 想全 Rust：选 Rust（配 Yew/Leptos/Sycamore）
• .NET 团队：选 Blazor

③ 包管理器（pnpm/yarn/npm/bun）

如果你选 TS/JS，会再问包管理器：

pnpm / yarn / npm / bun

建议：

• 新项目、单体应用：pnpm 很稳（依赖管理干净、安装快）
• 你团队已有统一：跟随团队标准最重要

④ UI Template 与 Flavor

TS/JS 会让你选 UI Template（Vanilla/Vue/Svelte/React/Solid/Angular/Preact），再选 TypeScript 或 JavaScript。

建议起步组合（最稳、最不绕）：

• UI Template：Vanilla
• UI Flavor：TypeScript
  原因很简单：先把 Tauri 心智模型跑通，再决定框架也不迟。

2.4 启动开发服务器（跑起来）

脚手架完成后，进入目录并安装/启动。文档示例给的是 cargo 安装 tauri-cli 并启动：

cd tauri-app
cargo install tauri-cli --version "^2.0.0" --locked
cargo tauri dev

执行后会发生什么：

• Rust 侧开始编译（src-tauri 后端）
• 前端 dev server 启动（如果模板是前端框架）
• 自动弹出一个桌面窗口加载你的页面

看到窗口跑起来，就说明“工具链 + WebView + Rust 编译链路”全部通了。

3. 手动接入：给现有前端项目加上 Tauri（Tauri CLI）

如果你已经有前端工程（比如 Vite/Next/Nuxt/SvelteKit），推荐这条路线。整体思路是：

1）先确保你的前端能在浏览器里跑（有 dev server）
2）安装 tauri-cli
3）告诉 Tauri：dev server URL 是什么，build 命令是什么，产物目录在哪
4）cargo tauri dev 让 Tauri 编译并打开窗口加载 dev server

3.1 以 Vite 为例创建一个前端（示例）

如果你还没有前端项目，文档用 Vite 举例：

mkdir tauri-app
cd tauri-app
npm create vite@latest .

3.2 安装 Tauri CLI

用 cargo 全局安装（文档示例）：

cargo install tauri-cli --version "^2.0.0" --locked

3.3 找到你的 dev server URL

比如 Vite 默认是：

http://localhost:5173

这个 URL 非常关键：Tauri 开发模式下就是加载它。

3.4 初始化 Tauri（生成 src-tauri）

在项目目录执行：

cargo tauri init

它会问一系列问题，典型如下：

• App name：应用名
• Window title：窗口标题
• Web assets location：静态资源目录（构建后产物）
• Dev server url：开发服务器 URL（例如 Vite 的 5173）
• Frontend dev command：前端启动命令（例如 pnpm run dev）
• Frontend build command：前端构建命令（例如 pnpm run build）

完成后，你会看到项目里多了一个 src-tauri/ 目录，这就是 Tauri 的 Rust 后端与配置中心。

3.5 启动 Tauri 开发模式

直接：

cargo tauri dev

它会：

• 编译 Rust
• 启动/连接你的前端 dev server
• 打开桌面窗口加载页面

到这里，你的“现有前端工程”就正式变成了一个 Tauri App。

4. 实战建议：如何少走弯路

4.1 先跑通“最小闭环”

强烈建议第一天只干三件事：
1）把 create-tauri-app 跑起来
2）把 cargo tauri dev 跑起来
3）确认窗口打开、能加载页面、热更新能用

闭环通了，再开始做：

• invoke 调 Rust 命令
• 文件/系统能力插件
• 打包与签名

4.2 不确定选什么就从 Vanilla 开始

Vanilla 最大价值是减少变量：

• 你只在学习 Tauri，不被框架配置分散注意力
• 后面要换 React/Vue 只是前端层替换，不影响你理解 Tauri 的核心工作方式

4.3 dev server URL 与 build 目录别填错

手动接入时最常见错误就是：

• dev server URL 填错端口/协议
• build 输出目录填错，导致打包后窗口白屏

经验：

• dev server 先在浏览器里打开确认没问题
• build 后的产物目录（dist/build/.output）要和你前端框架一致

4.4 tauri-cli 版本要对齐

文档示例明确安装 ^2.0.0，尽量保证 CLI 与项目依赖版本一致，减少“能编译但跑不起来”的奇怪兼容问题。

5. 你应该得到什么结果

不管你走哪条路线，最终你都会获得一个可运行的 Tauri App，并且开发时只需要记住一个核心命令：

cargo tauri dev