前几天有给大家分享一个vue3.x短视频|直播实例,这次分享的是electron跨端聊天应用。
vue3-electronQchat聊天应用 一款基于vue3.0+electron11+ant-design-vue+vuex4+v3layer等技术开发桌面端exe聊天软件实战项目。
vue3ElectronQChat 支持多窗体模式/换肤等功能。
实现了发送富文本消息、图片/视频预览、拖拽发送图片、截图/朋友圈等功能。
使用技术
- 编码+技术:vscode | vue3.0+vuex4+vue-router@4
- 跨端框架:electron11.2.3
- 组件库:ant-design-vue (阿里桌面端vue3组件库)
- 弹窗组件:v3layer(vue3自定义弹窗组件)
- 滚动条组件:v3scroll(vue3自定义滚动条组件)
- 打包工具:vue-cli-plugin-electron-builder
- 按需引入:babel-plugin-import^1.13.3
项目结构目录
效果一览
electron多窗体|父子modal窗口
项目支持同时打开多个窗口,新建父子modal窗口。
// 关于窗口
const handleAboutWin = () => {
createWin({
title: '关于',
route: '/about',
width: 380,
height: 280,
resize: false,
parent: winCfg.window.id,
modal: true,
})
}
// 换肤窗口
const handleSkinWin = () => {
createWin({
title: '换肤',
route: '/skin',
width: 720,
height: 475,
resize: false,
})
}
通过调用createWin方法,传入参数,即可快速生成一个新窗口。
electron无边框窗口|自定义导航菜单
项目采用无边框形式frame:false
,可以通过-webkit-app-region:drag
来自定义拖拽区域。
至于如何实现自定义导航,之前有过相关分享文章,大家感兴趣可以去看看。
electron主进程配置
使用vue3和electron创建的项目,会有一个background.js配置文件。
/**
* 主进程入口配置
*/
import { app, BrowserWindow, globalShortcut } from 'electron'
// import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
import Windows from './module/windows'
const isDevelopment = process.env.NODE_ENV !== 'production'
async function createWindow() {
let window = new Windows()
window.listen()
window.createWin({isMainWin: true})
window.createTray()
}
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
app.on('ready', async () => {
createWindow()
})
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}
electron-builder打包配置
项目打包配置可以在package.json里面配置,也可以在vue.config.js里面进行配置。
/**
* @Desc vue3项目配置文件
* @Time andy by 2021-02
* @About Q:282310962 wx:xy190310
*/
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", //图标路径
}
}
}
}
}
ant-design-vue组件按需引入
首先需要安装按需引入插件 npm i babel-plugin-import -D
并在 babel.config.js
里面进行相关配置。
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
// 按需引入第三方插件
plugins: [
[
'import',
{
'libraryName': 'ant-design-vue',
'libraryDirectory': 'es',
'style': 'css',
}
]
]
}
根据使用到的组件,按需引入即可。在打包的时候可大大的减少体积。
// 按需引入ant-design-vue组件库
import {
Button, message, Tabs, Checkbox, Image, Upload
} from 'ant-design-vue'
// ...
const Plugins = (app) => {
app.use(Button)
app.use(Tabs)
app.use(Checkbox)
app.use(Image)
app.use(Upload)
// ...
app.config.globalProperties.$message = message
}
export default Plugins
注意
在开发/打包的时候还需要注意下面的一些坑。
-
项目路径不能含有中文,否则打包会出错!
-
尽量不要使用 getCurrentInstance 函数来操作store或router,打包也会出错!
-
在渲染进程,也就是.vue页面,使用ipcRenderer或remote出现如下错误
Uncaught TypeError: fs.existsSync is not a function
配置 nodeIntegration: true 来开启Node环境支持。
好了,以上就是vue3.x+electron跨平台开发聊天程序的一些简单分享,希望各位喜欢!