全新原创研发新作`Electron-ViteChat桌面端仿微信聊天室`，正式完结了。 ![360截图20240709104646122.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c7f24b900c6146e9b768cc725fc01271~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1366&h=738&s=476756&e=png&b=f6f4f4) ![360截图20240708064359686.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07c78b33cdc84b4c85bae20754f102ee~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1366&h=738&s=424802&e=png&b=f7f6f6) ## 技术栈 - 编辑器：vscode - 框架技术：electron31+vite5.3.1+vue3.4.29+vue-router4.4.0 - 跨端框架：electron31.1.0 - 状态管理：pinia^2.1.7 - UI组件库：element-plus^2.7.6 (饿了么桌面端vue3组件库) - 本地存储：pinia-plugin-persistedstate^3.2.1 - 构建打包：electron-builder^24.13.3 - electron整合vite插件：vite-plugin-electron^0.28.7 ![p2.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ddb19b5b94ec41ff9d3b08c90d1617b9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=4500323&e=gif&f=254&b=f7f7f7) ![p1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f35f252d80b4641961ada307db2dac3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=2201979&e=gif&f=283&b=f6f6f6) electron-vitechat采用`vite5.x`搭建项目模板，`vue3 setup`语法糖编码。整合electron跨平台技术框架，支持新开多个窗口并存。 ![360截图20240708064854494.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed172b4ba91e4c42bca1776852ebfd96~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1366&h=738&s=159830&e=png&b=f5f5f5) ## 项目结构目录 ![360截图20240708033550146.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19a09aea650f4cce839a7ae7cc7a97ba~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=940&h=650&s=63887&e=png&b=1e1e1e) ![360截图20240708064304166.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4a059a343214492b0a207ce69efcef5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1366&h=738&s=404265&e=png&b=f9f4f4) ![360截图20240708064450447.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/209b17b463dd4e198dafdd3d8e4ac606~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1366&h=738&s=272851&e=png&b=f6f5f5) ## vite5.x整合electron搭建聊天项目 - vite5创建vue3项目模板 ```bash yarn create vite electron-vitechat cd electron-vitechat yarn install yarn dev ``` ![26e143077c4c2899c6f708d8e950e8c3_1289798-20240708234855034-1342212259.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da42609d39ba4664826af18e6a900036~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1366&h=666&s=102044&e=png&b=fdfdfd) 接下来，安装一些electron依赖包。如果安装失败或卡住，建议多试几次或切换镜像源。 ```ts // 安装electron yarn add -D electron // 安装electron-builder 用于打包可安装exe程序和绿色版免安装exe程序 yarn add -D electron-builder // 安装vite-plugin-electron 用于将vite与electron无缝结合 yarn add -D vite-plugin-electron ``` ## electron主进程配置 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9029fc684414876846bd034a8a4d5e5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=220&h=135&s=4465&e=png&b=28282a) ```ts /** * electron主进程入口配置 * @author andy */ import { app, BrowserWindow } from 'electron' import { WindowManager } from '../src/windows/index.js' // 忽略安全警告提示 Electron Security Warning (Insecure Content-Security-Policy) process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true const createWindow = () => { let win = new WindowManager() win.create({isMajor: true}) // 系统托盘管理 win.trayManager() // 监听ipcMain事件 win.ipcManager() } app.whenReady().then(() => { createWindow() app.on('activate', () => { if(BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if(process.platform !== 'darwin') app.quit() }) ``` 在vite.config.js中配置主进程入口。 ```ts import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'node:path' import electron from 'vite-plugin-electron' // import electron from 'vite-plugin-electron/simple' // https://vitejs.dev/config/ export default defineConfig(({ command, mode }) => { const env = loadEnv(mode, process.cwd()) return { define: { 'process.env': env, // 将.env环境变量注入到process.env }, plugins: [ vue(), electron({ entry: 'electron/main.js', }) /* electron({ main: { entry: 'electron/main.js' }, preload: { input: 'electron/preload.js' }, // renderer: {} }) */ ], // 构建配置 build: { // ... }, esbuild: { // 打包去除 console.log 和 debugger drop: ['console', 'debugger'] }, // 服务器配置 server: { // port: 3000, // open: true, // https: false, // proxy: {} }, resolve: { // 设置别名 alias: { '@': resolve(__dirname, 'src'), '@assets': resolve(__dirname, 'src/assets'), '@components': resolve(__dirname, 'src/components'), '@views': resolve(__dirname, 'src/views'), } } } }) ``` ![001360截图20240708000941692.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53906cdc4b00495ab04b67844b549318~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=320&h=380&s=19929&e=png&b=f7f7f7) ![002360截图20240708001112909.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e04ed96f3e5046b5a7d5f2bae8c29c23~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=49964&e=png&b=f6f6f6) ![003360截图20240708001303462.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a4290c950bb4331a720e2f98bdaca1f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=113557&e=png&b=f6f5f5) ![003360截图20240708002327702.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b85cb9b3ba44ffeb5cf2d9b02368904~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=110490&e=png&b=f6f5f5) ![004360截图20240708003010461.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8cff3995362d449999d18db2f74cae0a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=459220&e=png&b=f3eae9) ![004360截图20240708003254933.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ae0558790b14b01a648cfd863cdf4b1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=50337&e=png&b=fbfbfb) ![005360截图20240708003532900.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9821a310ec924d6e868ff5d2a4899d48~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=500&h=695&s=300329&e=png&b=fcf3f2) ![005360截图20240708003831501.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70f0b4a56c1c40f78fc1e8f7f601b505~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=500&h=695&s=21786&e=png&b=f9f8f8) ![006360截图20240708004140013.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b717a335fae44655aedb6885d1f08e59~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=775&h=580&s=730630&e=png&b=040404) ![010360截图20240708061209941.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d42da3d09085477ba32586b4f0c07162~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=122255&e=png&b=f4f3f3) ![010360截图20240708061530710.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ca9e069073c44eb856ded9b545bc4c0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=108538&e=png&b=f6f6f6) ![013360截图20240708061634990.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8dd233baf014ae881ea5fd051d33f76~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=275363&e=png&b=f5f5f5) ![014360截图20240708062445199.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c536f5fc3f44b7f83d250414aadd9f0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=184350&e=png&b=f8f7f7) ![019360截图20240708063149890.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94f7cb541b244051853db2b9afe1afd3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=126772&e=png&b=f8f8f8) ![021360截图20240708063331789.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c8acfa9a10e450791286ce80c134174~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=78454&e=png&b=f5f5f5) ![022360截图20240708063455662.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7e4dd33deb24607a6371f20f71083a2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=550&h=470&s=13855&e=png&b=f5f5f5) ## 渲染进程主入口main.js ```ts import { createApp } from 'vue' import './style.scss' import App from './App.vue' // 引入组件库 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' // 引入路由/状态管理 import Router from './router' import Pinia from './pinia' import { launchApp } from '@/windows/actions' launchApp().then(config => { if(config) { console.log('窗口参数:', config) console.log('窗口id:', config?.id) // 全局存储窗口配置 window.config = config } // 创建app应用实例 createApp(App) .use(ElementPlus) .use(Router) .use(Pinia) .mount('#app') }) ``` ## 项目布局模板整个项目分为**最左侧菜单条+侧边栏+右侧主体区**(自定义系统导航条) ![e6e9fa4cbb89784acc312a3df1a67456_1289798-20240709002940425-1211943705.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2547eac665ba4a8e8f70993e532edc76~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=77148&e=png&b=f6f6f6) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/302307f555cb43f292fe50c1ceb0f8a7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=220&h=243&s=7861&e=png&b=272728) ``` ``` ## vue3+electron31自定义拖拽导航窗口 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/26313ae6125e408a8e889cde9dc7b41b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=617&h=236&s=72502&e=png&b=fdf8f8) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9af20ffc84c44b5ea6b29adc10246768~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=220&h=242&s=7941&e=png&b=272728) ```ts ``` btns.vue模板控制窗口最大化/最小化/关闭功能。 ```ts ``` ![p3.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54c4bb09b31246b589a2518c73cd6df7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=815771&e=gif&f=141&b=f7f7f7) ## vite5+electron31实现多窗口实例 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15112c8ddadb405293bf03004aa56eca~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1366&h=738&s=887669&e=png&b=f4f1f1) ```ts /** * 创建新窗口 * @param {object} args 窗口配置参数 {url: '/chat', width: 850, height: 600, ...} */ export function winCreate(args) { window.electron.send('win-create', args) } ``` 通过给主进程发送创建窗口指令，便可快速开启一个独立窗体。 ```ts // 登录窗口 export function loginWindow() { winCreate({ url: '/login', title: '登录', width: 320, height: 380, isMajor: true, resizable: false, maximizable: false, alwaysOnTop: true }) } // 关于窗口 export function aboutWindow() { winCreate({ url: '/win/about', title: '关于', width: 375, height: 300, minWidth: 375, minHeight: 300, maximizable: false, alwaysOnTop: true, }) } // 设置窗口 export function settingWindow() { winCreate({ url: '/win/setting', title: '设置', width: 550, height: 470, resizable: false, maximizable: false, }) } ``` 在主进程中监听创建窗口事件。 ```ts /** * 主进程监听管理器 * 监听从渲染器进程（网页）发送出来的异步和同步信息。从渲染器进程发送的消息将被发送到该模块。 */ ipcManager() { console.log('watching ipc event...') /* ipcMain模块on监听 */ // 创建新窗口 ipcMain.on('win-create', (event, args) => this.create(args)) //... } ``` 通过`new BrowserWindow()`创建新窗口实例。 ```ts // 创建新窗口 create(options) { console.log('create window started...') // 窗口自定义配置参数 const windowConfig = mergeObjects(windowOptions, options) // 窗口系统配置参数 const windowBaseConfig = mergeObjects(windowBaseOptions, options) // 判断窗口是否存在 for(let i in this.winDict) { let win = this.getWinById(i) if(win && this.winDict[i].url === windowConfig.url && !this.winDict[i].isMultiple && !this.winDict[i].isMajor) { win.restore() win.focus() return } } // 设置父窗口 if(windowBaseConfig.parent) { console.log('window parent: ', windowBaseConfig.parent) windowBaseConfig.parent = this.getWinById(windowBaseConfig.parent) } // 创建窗口对象 let winObj = new BrowserWindow(windowBaseConfig) // 是否主窗口 if(windowConfig.isMajor) { // ... } // 加载页面 let url if(!windowConfig.url) { if(process.env.VITE_DEV_SERVER_URL) { url = process.env.VITE_DEV_SERVER_URL }else { url = winURL } }else { url = `${winURL}#${windowConfig.url}` } winObj.loadURL(url) windowConfig.id = winObj.id this.winDict[winObj.id] = windowConfig console.log('winDict:', this.winDict) // 开启开发者调试工具 if(isDev) { // console.log('open devtools...') // winObj.webContents.openDevTools({mode: 'bottom'}) } winObj.once('ready-to-show', () => { winObj.show() }) // 初始化渲染进程 winObj.webContents.on('did-finish-load', () => { this.sendById(winObj.id, 'win-loaded', windowConfig) }) } ``` ![p5-1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/911bcd4a958a4e109a1694b02f777820~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=840&h=610&s=2184731&e=gif&f=428&b=f6f5f5) ## electron打包配置在项目根目录新建一个`electron-builder.json`配置文件。 ```ts { "productName": "Electron-ViteChat", "appId": "com.andy.electron-vite-wechat", "copyright": "Copyright © 2024-present Andy Q:282310962", "compression": "maximum", "asar": true, "directories": { "output": "release/${version}" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true, "perMachine": true, "deleteAppDataOnUninstall": true, "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "ElectronViteChat" }, "win": { "icon": "./resources/shortcut.ico", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}", "target": [ { "target": "nsis", "arch": ["ia32"] } ] }, "mac": { "icon": "./resources/shortcut.icns", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}" }, "linux": { "icon": "./resources", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}" } } ``` Okay，以上就是electron31+vite5开发桌面跨端聊天项目的一些分享，由于涉及到的知识点还是蛮多，限于篇幅就先分享到这里，感谢大家的阅读！ https://juejin.cn/post/7363121890791899170 https://juejin.cn/post/7349542148733960211 https://juejin.cn/post/7319181229520519219 ![W6nuSEeU8IGLqHQCcO0vgEiF05PVclGC.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e85ad64524f48b9aee507f21bfa550f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600&h=95&s=44660&e=gif&f=8&b=fffcfc)