前段时间有给大家分享两个vue3.0实战项目，vue3仿微信pc版 | vue3仿抖音小视频。今天再给大家分享一个最新开发的vue3+electron跨端仿制QQ聊天应用。

项目简介

electron-qchat 基于vue3.0+electron11+antdv+v3layer+v3scroll等技术开发的跨平台模仿QQ桌面端聊天软件。

使用技术

• 编码+技术：VScode | Vue3.0+Electron11.2.3+Vuex4+VueRouter@4
• UI组件库：Ant-design-vue^2.0.0 (蚂蚁金服桌面端vue3组件库)
• 打包器：vue-cli-plugin-electron-builder
• 按需引入：babel-plugin-import^1.13.3
• 弹窗组件：V3layer（基于vue3自定义dialog组件）
• 滚动条组件：V3scroll（基于vue3自定义虚拟滚动条）

项目目录结构

vue3+electron实现多窗口模式

项目中的弹窗分为vue3自定义弹窗和electron构建多窗体弹窗。

vue3.0系列：Vue3自定义PC端弹窗组件V3Layer

至于使用electron如何快速搭建项目及构建多窗体模式，大家可以去看看之前的这篇分享。

基于 vue3+electron 创建多窗口踩坑记

Vue3+Electron实现QQ导航菜单/新开窗口

Electron自定义拖拽|最大/小/关闭按钮

项目整体采用无边框 frame: false 模式，所以需要自定义顶部导航栏。之前也有个一篇分享，感兴趣的可以去看下。

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

vue3+electron项目/打包配置

创建项目的时候，根目录有一个vue.config.js配置文件。里面可以配置一些electron-builder打包参数。

/**
 * 项目配置文件
 */

const path = require('path')

module.exports = {
    // 基本路径
    // publicPath: '/',

    // 输出文件目录
    // outputDir: 'dist',

    // assetsDir: '',

    // 环境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否开启https
        https: false,
        // 编译完是否打开网页
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config => {
        // 配置路径别名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@module', path.join(__dirname, 'src/module'))
            .set('@plugins', path.join(__dirname, 'src/plugins'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    },

    // 插件配置
    pluginOptions: {
        electronBuilder: {
            // 配置后可以在渲染进程使用ipcRenderer
            nodeIntegration: true,

            // 项目打包参数配置
            builderOptions: {
                "productName": "electron-qchat", //项目名称 打包生成exe的前缀名
                "appId": "com.example.electronqchat", //包名
                "compression": "maximum", //store|normal|maximum 打包压缩情况(store速度较快)
                "artifactName": "${productName}-${version}-${platform}-${arch}.${ext}", //打包后安装包名称
                // "directories": {
                //     "output": "build", //输出文件夹（默认dist_electron）
                // },
                "asar": false, //asar打包
                // 拷贝静态资源目录到指定位置
                "extraResources": [
                    {
                        "from": "./static",
                        "to": "static"
                    },
                ],
                "nsis": {
                    "oneClick": false, //一键安装
                    "allowToChangeInstallationDirectory": true, //允许修改安装目录
                    "perMachine": true, //是否开启安装时权限设置（此电脑或当前用户）
                    "artifactName": "${productName}-${version}-${platform}-${arch}-setup.${ext}", //打包后安装包名称
                    "deleteAppDataOnUninstall": true, //卸载时删除数据
                    "createDesktopShortcut": true, //创建桌面图标
                    "createStartMenuShortcut": true, //创建开始菜单图标
                    "shortcutName": "ElectronQChat", //桌面快捷键图标名称
                },
                "win": {
                    "icon": "./static/shortcut.ico", //图标路径
                }
            }
        }
    }
}

electron实现截图功能

聊天应用一般都需要有截图功能，这里使用了Node调用截图dll来实现。

// 屏幕截图
ipcMain.on('win-capture', () => {
    console.log('调用微信dll截图...')
    let printScr = execFile(path.join(__dirname, '../static/screenShot/PrintScr.exe'))
    printScr.on('exit', (code) => {
        if(code) {
            console.log(code)
        }
    })
})

如果出现打包后截图无效，则需要配置 extraResources 参数。

另外记得创建项目前最好不要设置中文目录，否则打包会出错。

ok，以上就是vue3+electron11开发跨端仿QQ客户端实例。希望大家能喜欢~~