Vue2整合Electron开发桌面级应用以及打包发布(提供Gitee源码)

目录

一、使用教程

1.1、启动项目

1.2、初始化串口

1.3、串口调试

1.4、关闭串口

二、打包配置

三、Gitee源码


一、使用教程

1.1、启动项目

先自行npm install组件库,然后找到package.json文件,直接点击dev启动项目

1.2、初始化串口

因为我电脑上没有串口,所以通过【Configure Virtual Serial Port Driver】这个软件创建了COM7和COM8两个虚拟串口,软件自行上网安装下载。

项目启动成功以后选择一个串口,这里我选择的是COM7,然后直接打开。

1.3、串口调试

这里我使用的软件是【Serial Port Utility】,我模拟了串口推送一条数据到我们应用上

发送完成以后这里边收到了来自串口的数据

同样的,我们也可以发送数据给串口

发送成功以后,我们串口就收到了来自应用的数据

1.4、关闭串口

调试完成以后我们点击关闭串口

二、打包配置

1、我们找到index.js文件,如果你要打包发布的话,需要把isProd这个参数设置为true,现在默认打包后应用运行方式是通过读取本地的dist文件进行运行的,并非运行在ip/域名上面,如果需要运行在ip/域名上面,请把dist文件交给nginx代理,然后把loadFile这行代码替换成loadURL即可。

注:如果启动项目后不想看到控制台,删除mainWindow.webContents.openDevTools()这行代码即可,我这里默认打开了。

2、直接点击build,项目就会开始打包

3、然后在项目当前文件夹会生成两个文件夹,我们打开dist_electron文件夹

双击就能直接安装

安装完成以后,在桌面打开软件就能正常使用了。

三、Gitee源码

博客当中就不贴代码了,所以我把代码全部打包上传到我的gitee上面,大家直接拉取即可

源码地址:https://gitee.com/huang-tuantuan/vue-electron

相关推荐
AbelTomato6 小时前
博客评论系统搭建回顾
javascript·typescript·cloudflare·supabase·hyperdrive
梦醒沉醉6 小时前
4、函数function
javascript
爱勇宝6 小时前
公司没给活干,却因为员工看手机把人开了:法院判赔11万元
前端·后端·程序员
Csvn6 小时前
模块化与工程化:CJS / ESM / 打包器,到底怎么协作?
前端
hunterandroid6 小时前
[鸿蒙从零到一] ArkTS Sendable 数据模型与跨线程共享实战
前端
摇滚侠6 小时前
《SpringBoot 3:入门与应用实战》第 9 章 使用 WebMvc 开发应用 阅读笔记 22
javascript·spring boot·笔记
「、皓子~6 小时前
海狸IM 2.1 正式发布
flutter·微服务·golang·electron·开源软件·im·海狸im
AICoder码农王6 小时前
Vitest 实战:从一个真实项目看懂测试套件
前端·前端框架
xiaominlaopodaren6 小时前
three.js地图视口瓦片(一):屏幕角点射线
javascript·gis·three.js
律宏阔6 小时前
Electron Forge 在 macOS M4 打包踩坑:Node.js 26 导致 make 异常中断
前端