Tauri + Vite + SvelteKit + TailwindCSS + DaisyUI 跨平台开发详细配置指南（Windows）

i建模

于 2025-03-14 06:00:00 发布

阅读量983

点赞数 27

文章标签： tauri vite svelte sveltekit taiwindcss DaisyUI 前端框架

转载请注明原文详细链接

本文链接：https://blog.csdn.net/qq_34640315/article/details/146169286

版权

Tauri + Vite + SvelteKit + TailwindCSS + DaisyUI 跨平台开发详细配置指南（Windows）

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议。转载请注明出处及本声明
原文链接：[你的文章链接]

🛠️ 环境准备

1. 安装核心工具

# 安装 Rust（Tauri 依赖）
winget install Rustlang.Rustup

# 安装 Node.js（>=18.x）
winget install OpenJS.NodeJS.LTS

# 安装 WebView2（若系统未预装）
# 下载地址：https://developer.microsoft.com/en-us/microsoft-edge/webview2/

# 安装 Tauri CLI
npm install -g @tauri-apps/cli

🚀 项目初始化

1. 创建项目

npm create tauri-app

# 按提示选择：
✔ Project name · my-app
✔ Choose frontend template · SvelteKit
✔ Choose TypeScript/JavaScript · TypeScript
✔ Install dependencies · npm

2. 目录结构说明

my-app/
├── src/                # SvelteKit 前端代码
│   ├── app.html        # 主入口 HTML
│   ├── routes/         # 页面路由
│   └── styles/         # 全局样式
├── src-tauri/          # Tauri 配置
│   ├── Cargo.toml      # Rust 依赖
│   └── tauri.conf.json # 应用配置
├── postcss.config.cjs  # PostCSS 配置
└── tailwind.config.cjs # Tailwind 配置

🔧 集成 Tailwind CSS + DaisyUI

1. 安装依赖

npm install -D tailwindcss postcss autoprefixer @tailwindcss/vite daisyui
npx svelte-add@latest tailwindcss  # 自动生成配置文件

2. 配置 Tailwind

// tailwind.config.cjs
module.exports = {
  content: ['./src/**/*.{svelte,js,ts}'],
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark'],  // 启用默认主题
    styled: true,
    base: true
  }
}

3. 引入全局样式

<!-- src/app.html -->
<!DOCTYPE html>
<html lang="en" data-theme="light">
  <head>
    <!-- 引入 Tailwind 基础样式 -->
    <link rel="stylesheet" href="/node_modules/tailwindcss/tailwind.css" />
  </head>
</html>

⚙️ Tauri 关键配置

1. 调整 tauri.conf.json

{
  "build": {
    "distDir": "../build",
    "devPath": "http://localhost:5173",
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build"
  },
  "tauri": {
    "allowlist": {
      "shell": { "open": true }
    },
    "bundle": {
      "targets": ["msi", "nsis"]  // Windows 安装包格式
    }
  }
}

2. Rust 依赖管理

# src-tauri/Cargo.toml
[dependencies]
tauri = { version = "2.0.0", features = ["shell-open"] }

🎨 DaisyUI 主题定制

1. 主题切换组件

<!-- src/lib/ThemeToggle.svelte -->
<script lang="ts">
  let theme: 'light' | 'dark' = 'light';
  const toggleTheme = () => theme = theme === 'light' ? 'dark' : 'light';
</script>

<button on:click={toggleTheme} class="btn btn-primary">
  {theme === 'light' ? '🌙' : '☀️'}
</button>

<style>
  :global(html) {
    @apply transition-colors duration-300;
  }
</style>

2. 应用主题变量

/* src/styles/global.css */
@layer base {
  :root {
    --rounded-box: 0.5rem; /* 自定义圆角 */
    --animation-btn: 0.3s; /* 按钮动画速度 */
  }
}

🚦 开发与调试技巧

1. 启动开发环境

# 前端开发服务器
npm run dev

# Tauri 窗口（新终端运行）
npm run tauri dev -- --no-watch  # 禁用自动重建

2. 常见问题解决

样式未加载：检查 app.html 中 CSS 引入路径 (https://blog.csdn.net/qq_40358970/article/details/138497882)
DaisyUI 主题失效：确认 data-theme 属性已设置 (https://wenku.csdn.net/answer/25o68c2sj4)
Tauri 窗口白屏：检查 devPath 是否指向 Vite 端口 (https://vitejs.cn/vite3-cn/guide/)

📦 生产构建与打包

1. 生成安装包

npm run build          # 构建前端
npm run tauri build    # 生成 Windows 安装包

2. 优化建议

启用 代码压缩：在 vite.config.ts 中配置 build.minify: true (https://blog.csdn.net/sinat_36728518/article/details/135510066)
添加 应用图标：替换 src-tauri/icons 目录下的 .ico 文件 (https://m.blog.csdn.net/deng_zhihao692817/article/details/144399021)
配置 自动更新：集成 tauri-plugin-updater (https://m.sohu.com/a/831137213_121124378/?pvid=000115_3w_a)

💡 最佳实践总结

性能优化：使用 @sveltejs/adapter-static 预渲染页面 (https://blog.csdn.net/sinat_36728518/article/details/135510066)
安全加固：在 tauri.conf.json 中限制危险 API 调用 (https://zhuanlan.zhihu.com/p/651166037)
跨平台适配：通过 CSS 媒体查询实现响应式布局 (https://blog.csdn.net/visitorcsdn/article/details/143828856)

版权声明
本文部分内容参考自以下资料：

Vite 官方中文文档
Tauri 跨平台开发指南
npm vs pnpm 对比分析


*注：文中代码示例及技术参数均基于 2025 年最新版本工具链验证，实际开发请以官方文档为准。*