Electron31-Vue3Chat：基于vite5+electron31+elementPlus仿微信聊天Exe实例

头像
xiaoyan2017
     湖北
    阅读 15 分钟
    2
    头图

    前言

    之前有分享一款vite5+vue3网页版聊天室。随着electron跨端技术迭代越来越成熟，结合vite5.x构建一版桌面端聊天exe程序ElectronViteChat。

    技术选型

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

    vite5-electronChat 实现了聊天、联系人、我的收藏、朋友圈、短视频等模块。支持electron新开多个窗口，换肤及自定义系统导航条功能。

    项目结构

    整个项目采用vite5.x构建工具整合electron跨端技术，使用vue3 setup语法编码开发。

    入口配置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) {
    console.log('窗口参数:', config)
    console.log('窗口id:', config?.id)

    // 全局存储窗口配置
    window.config = config
  }

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

    目前该electron-vitechat聊天项目已经发布到我的原创作品，有需要的可以去看看。
    https://gf.bilibili.com/item/detail/1106312011

    electron主线程入口配置

    image.png

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

    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'),
      }
    }
  }
})

    项目布局模板

    e6e9fa4cbb89784acc312a3df1a67456_1289798-20240709002940425-1211943705.png

    dd9e3db9c948d303cbb643b79b0a887d_1289798-20240709003339935-759820257.png

    <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+vue3实现无边框拖拽导航条

    image.png

    642672e9d2182f0e839a621b3234a090_1289798-20240709004624242-1478091239.png

    <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>

    自定义最大化/最小化/关闭按钮

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

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

  const props = defineProps({
    color: String,
    // 窗口是否可最小化
    minimizable: {type: [Boolean, String], default: true},
    // 窗口是否可最大化
    maximizable: {type: [Boolean, String], default: true},
    // 窗口是否可关闭
    closable: {type: [Boolean, String], default: true},
    // 层级
    zIndex: {type: [Number, String], default: 2024},
  })

  const hasMaximized = ref(false)
  const isResizable = ref(true)
  const isMaximizable = ref(true)

  // 用户是否可以手动调整窗口大小
  window.electron.invoke('win-isResizable').then(res => {
    isResizable.value = res
  })
  // 窗口是否可以最大化
  window.electron.invoke('win-isMaximizable').then(res => {
    isMaximizable.value = res
  })

  // 初始监听窗口是否最大化
  window.electron.invoke('win-isMaximized').then(res => {
    hasMaximized.value = res
  })
  // 实时监听窗口是否最大化
  window.electron.on('win-maximized', (e, data) => {
    hasMaximized.value = data
  })

  // 最小化
  const handleWinMin = () => {
    // winSet('minimize', window.config.id)
    window.electron.invoke('win-min')
  }
  // 最大化/还原
  const handleWinToggle = () => {
    // winSet('max2min', window.config.id)
    window.electron.invoke('win-toggle').then(res => {
      hasMaximized.value = res
    })
  }
  // 关闭
  const handleWinClose = () => {
    if(window.config.isMajor) {
      let el = layer({
        type: 'android',
        content: '是否最小化托盘，不退出程序?',
        layerStyle: 'background: #f9f9f9; border-radius: 8px;',
        closable: false,
        resize: false,
        btns: [
          {
            text: '最小化托盘',
            style: 'color: #646cff',
            click: () => {
              layer.close(el)
              setTimeout(() => {
                winSet('hide', window.config.id)
              }, 300)
            }
          },
          {
            text: '退出',
            style: 'color: #fa5151',
            click: () => {
              winSet('close')
            }
          }
        ]
      })
    }else {
      winSet('close', window.config.id)
    }
  }
</script>

<template>
  <div class="ev__winbtns flexbox flex-alignc vu__drag" :style="{'z-index': zIndex}">
    <div class="ev__winbtns-actions flexbox flex-alignc vu__undrag" :style="{'color': color}">
      <a v-if="isTrue(minimizable)" class="wbtn min" title="最小化" @click="handleWinMin"><i class="wicon elec-icon elec-icon-min"></i></a>
      <a v-if="isTrue(maximizable) && isResizable && isMaximizable" class="wbtn toggle" :title="hasMaximized ? '向下还原' : '最大化'" @click="handleWinToggle">
        <i class="wicon elec-icon" :class="hasMaximized ? 'elec-icon-restore' : 'elec-icon-max'"></i>
      </a>
      <a v-if="isTrue(closable)" class="wbtn close" title="关闭" @click="handleWinClose"><i class="wicon elec-icon elec-icon-quit"></i></a>
    </div>
  </div>
</template>

    electron+vue3窗口多开|electron多窗口

    image.png

    /**
 * 创建新窗口
 * @param {object} args 窗口配置参数 {url: '/chat', width: 850, height: 600, ...}
 */
export function winCreate(args) {
  window.electron.send('win-create', args)
}

    通过给主进程发送一个创建窗口指令，可快速新打开一个独立窗体。

    // 登录窗口
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,
  })
}

    窗口配置支持如下参数搭配使用。

    // 自定义窗口参数
const windowOptions = {
  // 窗口唯一标识id
  id: null,
  // 窗口标题
  title: 'Electron-ViteChat',
  // 窗口路由地址
  url: '',
  // 窗口数据传参
  data: null,
  // 是否是主窗口(为true则会关闭所有窗口并创建一个新窗口)
  isMajor: false,
  // 是否支持多开窗口(为true则支持创建多个窗口)
  isMultiple: false,
  // 窗口是否最大化
  maximize: false,
}

// 系统窗口参数(与electron的new BrowserWindow()参数一致)
const windowBaseOptions = {
  // 窗口图标
  icon: join(__root, 'resources/shortcut.ico'),
  // 是否自动隐藏菜单栏(按下Alt键显示)
  autoHideMenuBar: true,
  // 窗口标题栏样式
  titleBarStyle: 'hidden',
  // 窗口背景色
  backgroundColor: '#fff',
  // 宽度
  width: 840,
  // 高度
  height: 610,
  // 最小宽度
  minWidth: '',
  // 最小高度
  minHeight: '',
  // 窗口x坐标
  x: '',
  // 窗口y坐标
  y: '',
  // 是否可缩放
  resizable: true,
  // 是否可最小化
  minimizable: true,
  // 是否可最大化
  maximizable: true,
  // 是否可关闭
  closable: true,
  // 父窗口
  parent: null,
  // 是否模态窗口
  modal: false,
  // 窗口是否置顶
  alwaysOnTop: false,
  // 是否显示窗口边框(要创建无边框窗口，将frame参数设置为false)
  frame: false,
  // 是否透明窗口(仅frame: false有效)
  transparent: false,
  // 创建时是否显示窗口
  show: false,
}

    electron打包文件

    {
  "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}"
  }
}

    基于electron31+vue3开发客户端聊天exe程序就分享到这里，希望能给你有些帮助~

    https://segmentfault.com/a/1190000044946983
    https://segmentfault.com/a/1190000044847552

    electronelectron-buildervue3viteelement-plus
    xiaoyan2017
    765 声望318 粉丝

    web前端开发爱好者，专注于前端h5、jquery、vue、react、angular等技术研发实战项目案例。

    « 上一篇
    Vue3Wechat基于vite5.x+vue3+pinia桌面pc版仿微信聊天实例
    下一篇 »
    Vue3MacOS基于vite5+vue3+arco.design桌面pc版osx系统

    引用和评论

    被 8 篇内容引用
    推荐阅读
    头像
    vite6+tauri2.0客户端仿MacOS桌面|tauri2+rust+vue3桌面os

    xiaoyan2017

    头像
    vite5+tauri2.0客户端仿微信Exe聊天程序|tauri2+rust+vue3聊天实例

    xiaoyan2017阅读 4.8k

    头像
    vue3+tauri2.0桌面端后台Exe系统|tauri2+rust+vite5管理系统后台模板

    xiaoyan2017赞 1阅读 786评论 2

    头像
    最好的svg使用方案（个人觉得）

    热饭班长赞 2阅读 250

    头像
    表格Table实现前端全选所有功能

    小皇帝James阅读 1.1k

    头像
    uniapp 极速上手鸿蒙开发

    万少赞 2阅读 62

    头像
    用了这些 Vite 配置技巧，同事都以为我开挂了！(5000 字干货，建议收藏)

    十五阅读 729

    0 条评论
    得票最新