自研vue3+electron31.x聊天室|Electron-ViteChat仿微信桌面端聊天软件。

vite5-electron-wechat使用vite5构建聊天项目模板，整合electron跨平台技术框架，采用vue3 setup语法编码开发模式。

技术栈

• 开发工具：Vscode
• 技术框架：electron31.1.0+vite5.3.1+vue3.4.29+vue-router4.4.0
• UI组件库：element-plus^2.7.6 (饿了么桌面端vue3组件库)
• 状态管理：pinia^2.1.7
• 存储服务：pinia-plugin-persistedstate^3.2.1
• 打包构建：electron-builder^24.13.3
• electron整合vite插件：vite-plugin-electron^0.28.7

项目结构

整个项目结构层次分明、界面简约清爽。支持electron新开多个窗口、动态换肤等功能。

入口配置main.js

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) {
    // 全局存储窗口配置
    window.config = config
  }

  // 创建app应用实例
  createApp(App)
  .use(ElementPlus)
  .use(Router)
  .use(Pinia)
  .mount('#app')
})

electron主进程配置

新建一个electron文件夹，配置主进程及预加载文件。

/**
 * 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配置electron主进程入口。

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'node:path'
import electron from 'vite-plugin-electron'

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',
      })
    ],
  
    // 构建配置
    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'),
      }
    }
  }
})

electron+vue3主布局模板

<template>
  <template v-if="!route?.meta?.isNewWin">
    <div
      class="vu__container flexbox flex-alignc flex-justifyc"
      :style="{'--themeSkin': appstate.config.skin}"
    >
      <div class="vu__layout flexbox flex-col">
        <div class="vu__layout-body flex1 flexbox" @contextmenu.prevent>
          <!-- 菜单栏 -->
          <slot v-if="!route?.meta?.hideMenuBar" name="menubar">
            <MenuBar />
          </slot>

          <!-- 侧边栏 -->
          <div v-if="route?.meta?.showSideBar" class="vu__layout-sidebar flexbox">
            <aside class="vu__layout-sidebar__body flexbox flex-col">
              <slot name="sidebar">
                <SideBar />
              </slot>
            </aside>
          </div>

          <!-- 主内容区 -->
          <div class="vu__layout-main flex1 flexbox flex-col">
            <ToolBar v-if="!route?.meta?.hideToolBar" />
            <router-view v-slot="{ Component, route }">
              <keep-alive>
                <component :is="Component" :key="route.path" />
              </keep-alive>
            </router-view>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-else>
    <WinLayout />
  </template>
</template>

Electron31+vite5自定义导航条

<script setup>
  import { ref } from 'vue'
  import { isTrue } from '@/utils'

  import { winSet } from '@/windows/actions'

  import Winbtns from './btns.vue'

  const props = defineProps({
    // 标题
    title: {type: String, default: ''},
    // 标题颜色
    color: String,
    // 背景色
    background: String,
    // 标题是否居中
    center: {type: [Boolean, String], default: false},
    // 是否固定
    fixed: {type: [Boolean, String], default: false},
    // 背景是否镂空
    transparent: {type: [Boolean, String], default: false},
    // 层级
    zIndex: {type: [Number, String], default: 2024},

    /* 控制Winbtn参数 */
    // 窗口是否可最小化
    minimizable: {type: [Boolean, String], default: true},
    // 窗口是否可最大化
    maximizable: {type: [Boolean, String], default: true},
    // 窗口是否可关闭
    closable: {type: [Boolean, String], default: true},
  })
</script>

<template>
  <div class="ev__winbar" :class="{'fixed': fixed || transparent, 'transparent': transparent}">
    <div class="ev__winbar-wrap flexbox flex-alignc vu__drag">
      <div class="ev__winbar-body flex1 flexbox flex-alignc">
        <!-- 左侧区域 -->
        <div class="ev__winbar-left"><slot name="left" /></div>
        <!-- 标题 -->
        <div class="ev__winbar-title" :class="{'center': center}">
          <slot name="title">{{title}}</slot>
        </div>
        <!-- 右侧附加区域 -->
        <div class="ev__winbar-extra vu__undrag"><slot name="extra" /></div>
      </div>
      <Winbtns :color="color" :minimizable="minimizable" :maximizable="maximizable" :closable="closable" :zIndex="zIndex" />
    </div>
  </div>
</template>

Ok，以上就是electron31+vue3仿微信聊天exe程序的一些知识分享，整个项目涉及到的知识点还是蛮多，限于篇幅就先分享到这里。

感谢各位小伙伴的阅读，希望以上分享对大家有所帮助！