Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序

旱由发表于 2025-10-22 12:20:00

最新款tauri2+vite7+pinia3仿微信/QQ电脑端聊天软件Tauri2Chat。
tauri2-vue3-chat最新原创Tauri2.8+Vite7.1+Vue3+Pinia3+ElementPlus桌面端仿QQ/微信界面聊天应用。封装高复用tauri2多窗体、自定义圆角阴影窗口/导航条。提供了聊天、通讯录、收藏、朋友圈/短视频、我的等板块。
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022093851214-1464181795.png
运用技术

[*]编辑器：vscode
[*]跨平台框架：tauri2.8
[*]前端技术框架：vite^7.1.10+vue^3.5.22+vue-router^4.6.3
[*]状态管理：pinia^3.0.3
[*]本地存储：pinia-plugin-persistedstate^4.5.0
[*]UI组件库：element-plus^2.11.5
[*]富文本编辑器：@vueup/vue-quill^1.2.0
[*]样式预处理：sass^1.93.2
[*]短视频滑动插件：swiper^12.0.2
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022094134938-705601068.gif
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022094246099-1474168463.gif
项目框架目录

tauri2-vite7-wechat客户端聊天项目采用最新跨平台技术 tauri2.8 整合 vite7 搭建项目框架。
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022094511293-438781959.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022094613273-322519869.gif
Tauri2-ViteChat聊天系统已经更新到我的原创作品集，感谢支持！

基于tauri2+vue3+element-plus桌面端仿微信exe聊天程序
tauri2.0结合vite.js搭建项目

https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022095444618-835802175.png
之前有写过一篇关于tauri2结合vite.js搭建桌面端项目、创建多窗口、自定义托盘闪烁及右键菜单。有兴趣的可以去看看。
https://www.cnblogs.com/xiaoyan2017/p/18416811
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022095909416-1041481714.gif
tauri2-vue3-chat实现类似QQ登录/主窗口切换，支持主题壁纸、自定义最大化/最小化/关闭按钮，新窗口打开朋友圈/短视频。聊天模块支持新开窗口预览图片/视频、拖拽图片到聊天区域。
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022095944953-1302498593.png
项目布局模板

https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022100450393-1367708418.png
项目整体分为左侧菜单栏+侧边栏+内容区(自定义导航条)等板块。
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022100625641-451414564.png
                                                                                                                                                                                                                                                                                                                                                                           https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022100847099-360813200.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022100923414-882046051.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022100943640-476027935.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022100955741-1673667940.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101022128-847501124.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101051886-1960072751.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101109426-1797395788.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101133162-1368630368.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101149943-1228322299.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101209064-630698089.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101234920-503981941.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101252241-526229676.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101303999-1674166913.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101318807-1065661580.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101329217-1931932355.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101356411-827835043.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101429846-1013910240.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101452127-1581657951.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101518421-1513238671.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101601875-436214174.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101617651-329595121.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101641694-1587773577.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101707886-1676156880.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101723060-864429956.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101740526-1187924791.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101801450-1809284623.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101814157-1190786657.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101847626-1484241399.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022101902688-123717098.png
项目入口配置main.js

import { createApp } from 'vue'import './style.scss'import App from './App.vue'// 引入组件库import VEPlus from 've-plus'import 've-plus/dist/ve-plus.css'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'// 引入路由/状态配置import Router from './router'import Pinia from './pinia'createApp(App).use(VEPlus).use(ElementPlus).use(Router).use(Pinia).mount('#app')tauri2+vue3自定义无边框圆角阴影窗口

https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022102308888-1696764064.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022102540515-413510423.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022102602956-673273510.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022102726057-1970120474.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022102814181-116099259.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022102913214-657549541.png
设置 decorations: false 无边框模式。结合 transparent: true 和 shadow: false 实现自定义圆角阴影窗口。
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022103143509-1312140525.png
                                                   {{title}}                                        tauri设置无边框窗口后，开启拖拽功能直接在需要拖拽的元素标签设置 data-tauri-drag-region 属性，另外tauri还支持css设置拖拽功能。
// 拖拽.vu__drag {-webkit-app-region: drag;}// 取消拖拽.vu__undrag {-webkit-app-region: no-drag;}Tauri2+Vite7封装多开窗口

https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022103614173-246184881.png
/** * 创建新窗口 * @param {object} args 窗口配置参数 {label: 'home', url: '/home', width: 850, height: 610, ...} */export async function winCreate(args) {await emit('win-create', args)}// 主窗口export async function mainWindow() {await winCreate({ label: 'main', url: '/', title: 'TAURI-WINCHAT', width: 850, height: 620, minWidth: 700, minHeight: 450})}// 登录窗口export async function loginWindow() {await winCreate({ label: 'main-login', url: '/login', title: '登录', width: 320, height: 420, resizable: false, maximizable: false, alwaysOnTop: true})}// 关于窗口export async function aboutWindow() {await winCreate({ label: 'win-about', url: '/win/about', title: '关于', width: 320, height: 350, minWidth: 320, minHeight: 350, maximizable: false, alwaysOnTop: true,})}// 设置窗口export async function settingWindow() {await winCreate({ label: 'win-setting', url: '/win/setting', title: '设置', width: 550, height: 470, resizable: false, maximizable: false,})}自定义窗口配置参数
// 系统窗口参数(与tauri的new WebviewWindow()参数一致)const windowBaseOptions = {// 窗口唯一标识labellabel: null,// 窗口标题title: '',// 窗口路由地址url: '',// 宽度width: 850,// 高度height: 620,// 最小宽度minWidth: null,// 最小高度minHeight: null,// 窗口x坐标x: null,// 窗口y坐标y: null,// 窗口居中显示(当设置x/y，则需要设置为false)center: true,// 是否可缩放resizable: true,// 是否可最小化minimizable: true,// 是否可最大化maximizable: true,// 是否可关闭closable: true,// 最大化窗口maximized: false,// 父窗口句柄labelparent: null,// 窗口是否置顶alwaysOnTop: false,// 是否显示窗口边框(要创建无边框窗口，将decorations参数设置为false)decorations: false,// 是否透明窗口transparent: true,// 是否显示窗口阴影shadow: false,// 创建时是否显示窗口visible: false,// 禁止系统拖放dragDropEnabled: false}tauri2+vue3自定义托盘闪烁|消息提醒|托盘菜单

https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022104209800-1075097306.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022104140913-1749241478.png
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022104040740-431127253.png
/** * 自定义托盘图标 */use tauri::{tray::{MouseButton, TrayIconBuilder, TrayIconEvent}, Emitter, Manager, Runtime};pub fn tray_create(app: &tauri::AppHandle) -> tauri::Result {let _ = TrayIconBuilder::with_id("tray") .tooltip("TAURI-WINCHAT") .icon(app.default_window_icon().unwrap().clone()) .on_tray_icon_event(|tray, event| match event {    TrayIconEvent::Click {    id: _,    position,    rect: _,    button,    button_state: _,    } => match button {    MouseButton::Left {} => {       let windows = tray.app_handle().webview_windows();       for (key, value) in windows {          println!("点击左键: {}", key);          if key == "main-login" || key == "main" {          value.show().unwrap();          value.unminimize().unwrap();          value.set_focus().unwrap();          }       }    }    MouseButton::Right {} => {       println!("点击右键");       tray.app_handle().emit("tray_contextmenu", position).unwrap();    }    _ => {}    },    TrayIconEvent::Enter {    id: _,    position,    rect: _,    } => {    println!("鼠标滑过托盘");    tray.app_handle().emit("tray_mouseenter", position).unwrap();    }    TrayIconEvent::Leave {    id: _,    position,    rect: _,    } => {    println!("鼠标离开托盘");    tray.app_handle().emit("tray_mouseleave", position).unwrap();    }    _ => {} }) .build(app);Ok(())}https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022104002525-1939244736.gif
https://img2024.cnblogs.com/blog/1289798/202510/1289798-20251022104325690-24586566.png
/** * Tauri自定义系统托盘右键菜单 */import { WebviewWindow } from '@tauri-apps/api/webviewWindow'import { LogicalPosition } from '@tauri-apps/api/window'import { listen } from '@tauri-apps/api/event'import { authState } from '@/pinia/modules/auth'export default async function TrayContextMenu() {console.log('create tray contextmenu...')const authstate = authState()// 右键菜单宽度let menuW = 150// 右键菜单高度let menuH = authstate.authorization ? 300 : 48let webview = new WebviewWindow('win-traymenu', { url: '/tray/contextmenu', title: '托盘右键菜单', width: menuW, height: menuH, x: window.screen.width, y: window.screen.height, skipTaskbar: true, transparent: true, shadow: false, decorations: false, center: false, resizable: false, alwaysOnTop: true, focus: true, visible: false})await webview.listen('tauri://window-created', async() => { const win = await WebviewWindow.getByLabel('win-traymenu') win.hide()})await webview.listen('tauri://blur', async() => { const win = await WebviewWindow.getByLabel('win-traymenu') win.hide()})await webview.listen('tauri://error', async(error) => { console.log('traymenu error!', error)})// 监听托盘右键菜单事件listen('tray_contextmenu', async(event) => { console.log('tray_contextmenu: ', event) let position = event.payload const win = await WebviewWindow.getByLabel('win-traymenu') if(!win) return win.setAlwaysOnTop(true) win.setFocus() win.setPosition(new LogicalPosition(position.x - 5, position.y - menuH + 5)) win.show()})}以上就是tauri2+vite7+vue3搭建桌面端聊天项目的一些知识分享，希望对大家有所帮助！
附上几个最新版项目案例
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
Vite7网页版聊天|Vue3.5+Pinia3+ElementPlus仿微信网页端web聊天系统
uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
https://img2024.cnblogs.com/blog/1289798/202508/1289798-20250823231653477-721094528.gif

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

韩素欣 发表于 2025-11-5 16:54:06

谢谢楼主提供！

幽淆发表于 2025-12-3 22:47:42

感谢分享

方方仪 发表于 4 天前

这个有用。

寿爹座 发表于 3 天前

谢谢楼主提供！

凤患更 发表于昨天 16:02

这个有用。

页: [1]

程序园's Archiver

Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序