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）：

bash 复制代码

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，会再问包管理器：

text 复制代码

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 并启动：

bash 复制代码

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 举例：

bash 复制代码

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

3.2 安装 Tauri CLI

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

bash 复制代码

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

3.3 找到你的 dev server URL

比如 Vite 默认是：

text 复制代码

http://localhost:5173

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

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

在项目目录执行：

bash 复制代码

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 开发模式

直接：

bash 复制代码

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，并且开发时只需要记住一个核心命令：

bash 复制代码

cargo tauri dev

看到窗口弹出，恭喜你：Tauri 的"前端 UI + Rust 后端 + 系统 WebView"链路已经完整打通，后续就是加功能、加插件、做权限与安全边界、做打包分发。