Tauri 快速上手：10分钟从安装到第一个窗口

Tauri 快速上手10分钟从安装到第一个窗口【免费下载链接】tauriBuild smaller, faster, and more secure desktop and mobile applications with a web frontend.项目地址: https://gitcode.com/GitHub_Trending/ta/tauri按顺序做完下面的操作10分钟内你的电脑上会弹出一个 Tauri 桌面窗口再敲一条命令就能生成可分发的安装包。文中覆盖环境自检与各系统一键安装命令用 create-tauri-app 脚手架建项目并首次启动核心配置 tauri.conf.json 里最常改的字段项目结构、打包产物与高频踩坑自救30秒认识 Tauri它是什么Tauri 是一个用 Web 前端技术构建桌面、移动应用的跨平台框架界面用你熟悉的 HTML/JS 写后端是一个 Rust 二进制渲染交给系统自带的 WebView。WebView 就像浏览器里那个可以嵌进任何应用的窗口。和 Electron 的区别在于Tauri 不把浏览器打进包里而是直接复用系统已有的所以体积天然小得多。前端能调用哪些系统能力也要在权限文件里逐项声明默认全部关闭攻击面更小。对比项TauriElectron安装包体积常见不到 10MB普遍 50MB 以上WebView复用系统自带WKWebView / WebView2 / WebKitGTK随包携带整个 Chromium后端编译出的 Rust 二进制难以逆向Node.js 运行时环境自检与各系统一键安装命令先确认系统满足最低要求操作系统最低版本核心依赖Windows7 及以上WebView2macOS10.15 及以上WKWebViewLinuxUbuntu 22.04 及以上webkit2gtk 4.1Tauri 应用还需要两条工具链Rust 用来编译后端Node.js 用来跑 CLI。下面三条命令来自官方安装脚本一次装齐# WindowsPowerShell 管理员模式 Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(https://install.tauri.app/sh)) # macOS /bin/bash -c $(curl -fsSL https://install.tauri.app/sh) # LinuxDebian/Ubuntu curl --proto https --tlsv1.2 -sSf https://install.tauri.app/sh | sh按你的系统选一条执行脚本会检测环境并装好缺失的依赖完成后终端显示安装成功。脚手架创建 Tauri 项目并第一次启动 用官方脚手架 create-tauri-app 创建项目选你常用的包管理器写法npm create tauri-applatest # npm yarn create tauri-app # yarn pnpm create tauri-app # pnpm脚手架会依次问你 4 个问题项目名称例如my-tauri-app前端框架新手选 vanilla-ts 模板即可也可以选 react、vue、svelte包管理器选你平时用的那个是否安装依赖选 y省去手动装然后进入目录启动cd my-tauri-app npm run tauri dev第一次运行需要编译 Rust 后端终端会有进度条等待数分钟。随后会弹出一个标题为 Welcome to Tauri! 的窗口中间有一个计数器按钮点一下加 1你改前端代码窗口里的界面会实时热更新。核心配置文件 tauri.conf.json 在哪里改核心配置在src-tauri/tauri.conf.json这是一份最小可运行的配置{ productName: Hello World, build: { frontendDist: index.html }, app: { windows: [ { title: Welcome to Tauri!, width: 800, height: 600 } ] }, bundle: { active: true, targets: all } }新手最常改的几个字段配置路径作用示例值productName应用名称显示在窗口栏与系统里My Appbuild.frontendDist前端构建产物位置窗口加载的就是它distapp.windows[].width/height窗口初始尺寸800/600app.security.csp内容安全策略限制页面可加载的资源default-src self完整字段参考仓库内的 tauri.config.schema.json。认清脚手架生成的项目结构与后端入口 创建完成后的目录树my-tauri-app/ ├── src/ # 前端源码HTML/JS或你选框架的文件 ├── index.html # 前端入口页 ├── package.json # 前端依赖与脚本 └── src-tauri/ # Tauri 后端目录 ├── src/main.rs # Rust 后端入口 ├── capabilities/ # 权限声明前端可调用哪些 API └── tauri.conf.json # 核心配置后端入口src-tauri/src/main.rs的最小代码#[tauri::command] fn greet(name: str) - String { format!(Hello {name}, greeted from Rust!) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![greet]) .run(tauri::generate_context!()) .expect(error while running tauri application); }「往这里加新功能」的位置就是 main.rs写一个带#[tauri::command]的函数再登记到generate_handler![...]那一行前端就能用invoke(greet, { name: Tauri })调用它。一条命令打包出可分发安装包npm run tauri build它会把后端与前端按 release 模式编译产物生成在src-tauri/target/release/bundle/下。各平台可产出的安装包Windows.exeNSIS 安装包、.msimacOS.app、.dmgLinux.deb、.rpm、.AppImage想控制产出哪几种格式改tauri.conf.json里的bundle.targets。Tauri 常见踩坑与自救依赖安装失败了怎么办多半是缺 Rust 工具链。单独执行安装脚本按提示一路回车即可curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh窗口打开却是空白页build.frontendDist指向错了。先执行npm run build构建前端再确认该字段指向真实的产物目录。前端调用 Rust 命令报权限错误Tauri v2 默认启用 ACL 权限。把对应命令的权限加进src-tauri/capabilities/下的 JSON 文件再试。Tauri 学习路线图这个 Tauri 入门教程的目标只是「能跑」之后按三档推进能跑clone 仓库git clone https://gitcode.com/GitHub_Trending/ta/tauri跑通 examples/helloworld 示例把窗口标题、尺寸改成自己的能改读 packages/api 里的 TypeScript APIinvoke、event、window 等对照 examples/api 的官方示例页练习能发研究 crates/tauri-bundler 支持的打包格式给自己的应用写好 capabilities 权限再体验内置的自动更新下一篇讲如何定义你自己的 Tauri 插件并在 capabilities 里声明权限。【免费下载链接】tauriBuild smaller, faster, and more secure desktop and mobile applications with a web frontend.项目地址: https://gitcode.com/GitHub_Trending/ta/tauri创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考