Tauri + Vite + SvelteKit + TailwindCSS + DaisyUI 跨平台开发详细配置指南（Windows）
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 年最新版本工具链验证，实际开发请以官方文档为准。*