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 年最新版本工具鏈驗證，實際開發請以官方文檔為準。*
)
解決方法)
