SvelteKit + Bun项目加入Tauri的全流程指南

SvelteKit + Bun项目后用Tauri进行跨平台开发全流程指南

1. 环境验证与准备

1.1 验证现有环境

确保已安装以下组件（版本要求）：

Bun：≥1.0.23（运行 bun --version 验证）
SvelteKit：≥2.0.0（检查 package.json 中的依赖版本）
Node.js：≥18.x（若通过 nvm 管理）

1.2 安装 Tauri 依赖

1.2.1 Rust 工具链

# 安装 Rust（必须重启后生效）
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env
rustup update

1.2.2 系统级依赖

Windows：安装 Microsoft C++ Build Tools（勾选 MSVC v143 和 Windows SDK）
macOS/Linux：安装 clang 和 libwebkit2gtk（通过系统包管理器）

1.2.3 配置 Rust 镜像（加速下载）

在 ~/.cargo/config 中添加：

[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"
replace-with = 'ustc'
[source.ustc]
registry = "git://mirrors.ustc.edu.cn/crates.io-index"

2. Tauri 项目集成

2.1 初始化 Tauri 项目

在 SvelteKit 项目根目录执行：

bunx @tauri-apps/cli init

按提示配置：

前端开发路径：http://localhost:5173（需与 SvelteKit 开发服务器端口一致）
构建输出目录：../build（指向 SvelteKit 的 build 目录）

2.2 关键配置调整

`svelte.config.js`（适配静态构建）

import adapter from '@sveltejs/adapter-static';
export default {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: 'index.html'  // 支持动态路由
    })
  }
};

`src-tauri/tauri.conf.json`（核心配置）

{
  "build": {
    "distDir": "../build",  // 必须与 SvelteKit 输出目录一致
    "devPath": "http://localhost:5173"
  },
  "tauri": {
    "embeddedServer": {
      "pattern": { "use": "browser" }  // 处理客户端路由
    }
  }
}

3. 开发与调试流程

3.1 启动开发环境

# 启动 SvelteKit 开发服务器
bun run dev -- --bun

# 启动 Tauri 窗口（新终端运行）
bun tauri dev

3.2 跨进程通信示例

Rust 后端（src-tauri/src/main.rs）：

#[tauri::command]
fn get_system_info() -> String {
    format!("OS: {}", std::env::consts::OS)
}

前端调用（SvelteKit）：

import { invoke } from '@tauri-apps/api';

const info = await invoke('get_system_info');
console.log(info);  // 输出：OS: windows/linux/macos

4. 生产构建与异常处理

4.1 构建流程

# 构建前端资源
bun run build

# 打包 Tauri 应用
bun tauri build

4.2 常见异常及解决方案

问题1：`index.html` 未生成

原因：SvelteKit 构建路径未正确指向 Tauri 的 distDir
解决：
1. 检查 svelte.config.js 中的 pages 和 assets 配置 (https://blog.csdn.net/gitblog_09415/article/details/142226956)
2. 确保 tauri.conf.json 的 distDir 为 ../build (https://blog.csdn.net/qq_34640315/article/details/146167174)

问题2：动态路由失效

现象：访问 /user/123 返回 404
解决：
1. 在 svelte.config.js 中设置 fallback: 'index.html' (https://blog.csdn.net/gitblog_09415/article/details/142226956)
2. 在 tauri.conf.json 中启用 "pattern": "browser" (https://tauri.app/zh-cn/v1/guides/getting-started/setup/vite/)

问题3：Bun 运行时报错

现象：bun:sqlite 模块加载失败
解决：强制使用 Bun 运行时（启动命令添加 --bun）(https://blog.csdn.net/gitblog_00286/article/details/144418711)

参考文档与版权声明

参考链接

版权声明

本文版权归作者所有，未经授权禁止转载。引用需遵守以下规则：

非商用：仅限个人学习或技术交流
署名要求：转载需注明原文链接及作者信息
禁止篡改：不得修改原文核心内容或误导性表述

侵权行为举报：如有未经授权的使用，请联系 CSDN 平台处理。

立即行动：关注 Tauri 中文社区获取最新动态，加入开发者论坛参与讨论！


**注意事项**：  
- 若需部署到移动端（iOS/Android），需额外配置 Xcode/Android Studio [71](@ref)(https://m.blog.csdn.net/sxlesq/article/details/144906918)  
- 使用 `tauri-plugin-sql` 集成数据库时，需在 `Cargo.toml` 中指定 Git 分支 [40](@ref)(https://www.cnblogs.com/nolca/p/18130689)