环境搭建 #

一、环境要求 #

1.1 基础要求 #

工具	最低版本	推荐版本
Node.js	16.x	18.x+
Rust	1.70	最新稳定版
pnpm/yarn/npm	任意	pnpm

1.2 各平台系统要求 #

Windows

text

- Windows 10 (1809+) 或 Windows 11
- Microsoft Edge WebView2 Runtime
- Visual Studio Build Tools

macOS

text

- macOS 10.15 (Catalina) 或更高版本
- Xcode Command Line Tools

Linux

text

- Debian/Ubuntu: webkit2gtk-4.1
- Arch: webkit2gtk-4.1
- Fedora: webkit2gtk4.1

二、安装 Rust #

2.1 Windows 安装 #

步骤一：下载安装程序

powershell

# 访问官网下载或使用命令
winget install Rustlang.Rustup

步骤二：安装 Visual Studio Build Tools

powershell

# 下载并安装 Visual Studio Build Tools
# 选择 "Desktop development with C++" 工作负载
winget install Microsoft.VisualStudio.2022.BuildTools

步骤三：验证安装

powershell

rustc --version
cargo --version

2.2 macOS 安装 #

bash

# 安装 rustup
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 配置环境变量
source $HOME/.cargo/env

# 验证安装
rustc --version
cargo --version

2.3 Linux 安装 #

bash

# 安装 rustup
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 配置环境变量
source $HOME/.cargo/env

# 验证安装
rustc --version
cargo --version

2.4 安装系统依赖 #

Debian/Ubuntu

bash

sudo apt update
sudo apt install -y \
    libwebkit2gtk-4.1-dev \
    build-essential \
    curl \
    wget \
    file \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev

Arch Linux

bash

sudo pacman -S --needed \
    webkit2gtk-4.1 \
    base-devel \
    curl \
    wget \
    file \
    openssl \
    gtk3 \
    libayatana-appindicator \
    librsvg

Fedora

bash

sudo dnf install \
    webkit2gtk4.1-devel \
    openssl-devel \
    curl \
    wget \
    file \
    libappindicator-gtk3-devel \
    librsvg2-devel

三、安装 Node.js #

3.1 使用 nvm 安装（推荐） #

Windows

powershell

# 安装 nvm-windows
winget install CoreyButler.NVMforWindows

# 安装 Node.js
nvm install 20
nvm use 20

macOS/Linux

bash

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 安装 Node.js
nvm install 20
nvm use 20

3.2 验证安装 #

bash

node --version
npm --version

四、安装 Tauri CLI #

4.1 全局安装 #

bash

# 使用 npm
npm install -g @tauri-apps/cli

# 使用 pnpm（推荐）
pnpm add -g @tauri-apps/cli

# 使用 yarn
yarn global add @tauri-apps/cli

4.2 验证安装 #

bash

tauri --version

4.3 查看帮助 #

bash

tauri --help

五、创建项目 #

5.1 使用 create-tauri-app #

bash

# 交互式创建项目
npm create tauri-app@latest

# 或使用 pnpm
pnpm create tauri-app

5.2 项目配置选项 #

text

✔ Project name · my-tauri-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript
✔ Choose your package manager · pnpm
✔ Choose your UI template · React
✔ Choose your UI flavor · TypeScript

5.3 项目模板选项 #

模板	说明
Vanilla	纯 JavaScript/TypeScript
React	React + TypeScript
Vue	Vue 3 + TypeScript
Svelte	Svelte + TypeScript
Solid	SolidJS + TypeScript
Angular	Angular + TypeScript

六、项目结构 #

6.1 目录结构 #

text

my-tauri-app/
├── src/                    # 前端源码
│   ├── assets/            # 静态资源
│   ├── components/        # 组件目录
│   ├── App.tsx            # 主组件
│   ├── main.tsx           # 入口文件
│   └── vite-env.d.ts      # 类型声明
├── src-tauri/             # Tauri 后端
│   ├── icons/             # 应用图标
│   ├── src/               # Rust 源码
│   │   ├── main.rs        # 主入口
│   │   └── lib.rs         # 库文件
│   ├── Cargo.toml         # Rust 配置
│   ├── tauri.conf.json    # Tauri 配置
│   └── build.rs           # 构建脚本
├── public/                # 公共资源
├── index.html             # HTML 模板
├── package.json           # 项目配置
├── vite.config.ts         # Vite 配置
└── tsconfig.json          # TypeScript 配置

6.2 关键文件说明 #

文件	作用
tauri.conf.json	Tauri 核心配置文件
Cargo.toml	Rust 项目配置
src-tauri/src/main.rs	Rust 主入口
src/main.tsx	前端入口

七、配置文件详解 #

7.1 tauri.conf.json #

json

{
    "$schema": "https://schema.tauri.app/config/2",
    "productName": "my-tauri-app",
    "version": "0.1.0",
    "identifier": "com.mycompany.myapp",
    "build": {
        "beforeDevCommand": "pnpm dev",
        "devUrl": "http://localhost:1420",
        "beforeBuildCommand": "pnpm build",
        "frontendDist": "../dist"
    },
    "app": {
        "withGlobalTauri": true,
        "windows": [
            {
                "title": "My Tauri App",
                "width": 800,
                "height": 600,
                "resizable": true,
                "fullscreen": false
            }
        ],
        "security": {
            "csp": null
        }
    },
    "bundle": {
        "active": true,
        "targets": "all",
        "icon": [
            "icons/32x32.png",
            "icons/128x128.png",
            "icons/128x128@2x.png",
            "icons/icon.icns",
            "icons/icon.ico"
        ]
    }
}

7.2 Cargo.toml #

toml

[package]
name = "my-tauri-app"
version = "0.1.0"
edition = "2021"

[build-dependencies]
tauri-build = { version = "2", features = [] }

[dependencies]
tauri = { version = "2", features = [] }
tauri-plugin-shell = "2"
serde = { version = "1", features = ["derive"] }
serde_json = "1"

[features]
default = ["custom-protocol"]
custom-protocol = ["tauri/custom-protocol"]

八、开发工具配置 #

8.1 VS Code 扩展 #

推荐安装以下扩展：

text

1. rust-analyzer       - Rust 语言支持
2. Tauri               - Tauri 开发支持
3. CodeLLDB            - Rust 调试支持
4. Better TOML         - TOML 文件支持
5. ESLint              - JavaScript/TypeScript 检查
6. Prettier            - 代码格式化

8.2 VS Code 配置 #

json

// .vscode/settings.json
{
    "editor.formatOnSave": true,
    "rust-analyzer.checkOnSave.command": "clippy",
    "[rust]": {
        "editor.defaultFormatter": "rust-lang.rust-analyzer"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

8.3 调试配置 #

json

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "lldb",
            "request": "launch",
            "name": "Tauri Development Debug",
            "cargo": {
                "args": [
                    "build",
                    "--manifest-path=./src-tauri/Cargo.toml",
                    "--no-default-features"
                ]
            },
            "preLaunchTask": "ui:dev"
        }
    ]
}

九、运行项目 #

9.1 开发模式 #

bash

# 进入项目目录
cd my-tauri-app

# 安装依赖
pnpm install

# 启动开发服务器
pnpm tauri dev

9.2 构建生产版本 #

bash

# 构建应用
pnpm tauri build

9.3 输出目录 #

text

src-tauri/target/release/
├── bundle/
│   ├── msi/              # Windows 安装包
│   ├── dmg/              # macOS 安装包
│   ├── deb/              # Debian/Ubuntu 包
│   └── appimage/         # Linux AppImage
└── my-tauri-app          # 可执行文件

十、常见问题 #

10.1 Rust 安装失败 #

bash

# 手动设置镜像源（国内用户）
export RUSTUP_DIST_SERVER=https://rsproxy.cn
export RUSTUP_UPDATE_ROOT=https://rsproxy.cn/rustup

# 然后重新安装
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

10.2 Linux 依赖缺失 #

bash

# 检查缺失依赖
tauri info

# 根据提示安装缺失的包

10.3 WebView2 未安装（Windows） #

powershell

# 下载并安装 WebView2
winget install Microsoft.EdgeWebView2Runtime

10.4 编译错误 #

bash

# 清理并重新构建
cd src-tauri
cargo clean
cd ..
pnpm tauri dev

十一、环境检查 #

11.1 使用 tauri info #

bash

tauri info

输出示例：

text

Environment
  › OS: Mac OS 14.0.0 X64
  › Node.js: 20.10.0
  › npm: 10.2.3
  › pnpm: 8.12.1
  › yarn: 1.22.21
  › rustup: 1.75.0
  › rustc: 1.75.0
  › cargo: 1.75.0
  › Rust toolchain: stable-x86_64-apple-darwin

Packages
  › @tauri-apps/cli: 2.0.0
  › @tauri-apps/api: 2.0.0

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../dist
  › devPath: http://localhost:1420/

十二、总结 #

12.1 核心要点 #

要点	说明
Rust	必须安装，后端开发语言
Node.js	必须安装，前端开发环境
系统依赖	各平台需要安装对应依赖
Tauri CLI	开发和构建工具

12.2 下一步 #

环境搭建完成后，接下来让我们创建第一个应用，开始你的 Tauri 开发之旅！