JeecgBoot低代码平台 Electron 桌面端打包实战:从开发到分发的完整流程

简介: 在很多企业场景中,纯 Web 应用无法满足全部需求——离线使用、系统托盘、本地文件操作、硬件设备调用等能力只有桌面端才能提供。JeecgBoot低代码平台基于 Vite + Vue3 + Electron 技术栈,能够将已有的 Web 项目快速封装为跨平台桌面应用,支持 Windows(exe)、macOS(dmg)和 Linux(deb)三大平台。 JeecgBoot低代码的 Electron 方案采用了主流的架构设计:

JeecgBoot AI专题研究 | JeecgBoot低代码桌面应用构建与分发指南


为什么需要桌面端?

在很多企业场景中,纯 Web 应用无法满足全部需求——离线使用、系统托盘、本地文件操作、硬件设备调用等能力只有桌面端才能提供。JeecgBoot低代码平台基于 Vite + Vue3 + Electron 技术栈,能够将已有的 Web 项目快速封装为跨平台桌面应用,支持 Windows(exe)、macOS(dmg)和 Linux(deb)三大平台。

技术架构概览

JeecgBoot低代码的 Electron 方案采用了主流的架构设计:

  • 渲染进程:复用 Vue3 前端代码,无需额外开发
  • 主进程:处理窗口管理、系统交互、IPC 通信
  • 构建工具:electron-builder 负责打包分发
  • 在线升级:支持版本检测与自动更新

环境搭建与依赖安装

第一步:安装依赖

pnpm install

注意:开源版本中部分 Electron 相关依赖的安装代码可能被注释,需要先检查并取消注释。Electron 核心包的下载通常需要约 10 分钟,这是正常现象,请耐心等待。

开发调试

依赖安装完成后,先在开发模式下验证 Electron 功能是否正常:

npm run electron:dev

如果窗口正常弹出且页面加载无误,说明环境配置正确,可以进入下一步。

打包配置

在正式构建之前,有三个配置文件需要根据实际情况调整:

1. .env — 应用基础信息

修改应用标题和简称,这些信息会显示在桌面端的标题栏和任务栏中。

2. .env.prod_electron — 生产环境接口

配置桌面端连接的后端 API 地址,确保与 Web 版本区分开。

3. electron-builder.yaml — 产品信息

设置产品名称、应用图标、安装包选项等分发相关配置。

执行构建

配置完成后,一条命令完成编译和打包:

npm run electron:build-all

构建产物输出到 dist-electron 目录,包含对应平台的安装包文件。

常见问题与解决方案

在 JeecgBoot低代码平台的 Electron 打包过程中,以下几个问题出现频率较高:

问题一:Electron 依赖安装失败

如果在安装阶段遇到 Electron 下载失败的错误,可以手动触发安装:

node node_modules/electron/install.js

问题二:Windows 下符号链接权限不足

错误信息类似 "Cannot create symbolic link"。解决方法:以管理员身份运行命令行工具。

问题三:DLL 文件被占用导致构建失败

"Access is denied" 类错误通常是因为之前解压运行的应用还在后台运行。关闭所有 Electron 相关进程后重试。

问题四:缺少类型定义文件

如果报 @types/mousetrap 缺失,清理并重新安装依赖:

rm -rf node_modules
pnpm install

开发阶段的性能优化技巧

如果你当前只做 Web 端开发,不需要 Electron 功能,可以临时禁用它以加快开发服务器启动速度:

  1. 注释 build/vite/plugin/electron.ts 中的插件逻辑
  2. 移除 build/vite/plugin/index.ts 中对 electron 插件的引用
  3. 删除 package.json 中 Electron 相关的依赖声明

这样做可以显著缩短 pnpm dev 的启动时间,需要打包桌面端时再恢复即可。


总结

JeecgBoot低代码平台的 Electron 打包方案降低了桌面端开发的门槛,让 Web 开发者无需深入学习原生开发技术就能交付跨平台桌面应用。整个流程从安装到出包,核心步骤不过五步,即使是首次接触 Electron 的开发者也能快速上手。


目录
相关文章
|
5月前
|
人工智能 前端开发 JavaScript
JeecgBoot低代码平台微信支付宝支付模块集成开发指南
在 JeecgBoot低代码平台中,支付功能采用前后端分离的标准架构:前端负责发起支付请求、展示支付界面(二维码或跳转),后端负责与微信/支付宝的服务器通信、处理回调通知、维护订单状态。 本文聚焦于前端侧的对接实现,涵盖微信扫码支付和支付宝网页支付两种主流方式。 微信支付采用"生成付款码 → 用户扫码 → 轮询结果"的标准流程。 调用 JeecgBoot低代码后端接口获取微信支付二维码: 接口返回支付二维码图片和关联的订单信息。前端将二维码渲染到页面上,引导用户使用微信扫码完成支付。
371 3
|
3天前
|
人工智能 缓存 API
买了 Codex Max 20 Pro,我的主力却换成了 DeepSeek-V4-Flash——因为它快得不可思议
花大价钱订阅的顶级编码服务,最终输给了一个"快"字。两张真实截图,说明白这个选择![封面:AI 芯片闪电冲刺,甩开沉重的旧时代](https://oscimg.oschina.net/oscnet/upb32a147db61bdd588f9a17318139cf97237.png)我买了 Code
61 1
买了 Codex Max 20 Pro,我的主力却换成了 DeepSeek-V4-Flash——因为它快得不可思议
|
1月前
|
人工智能 NoSQL Java
不吹不黑,DeepSeek 编程实测翻车:这些低级问题暴露真实水平
用 DeepSeek 写了一周代码,坦白说——体验不太理想。不是复杂算法写不出来,而是在工程基本功上频频踩坑:字符串拼 YAML、改完不编译、看到版本号数字小就往上加……全是低级错误。本文汇总一周真实使用中遇到的各种翻车现场。![AI编码能力对比](https://oscimg.oschina.n
179 0
不吹不黑,DeepSeek 编程实测翻车:这些低级问题暴露真实水平
|
2月前
|
人工智能 Java BI
内置Claude Skills怎么玩?AI 产品智能化的下一个标准配置
JimuReport AI专题研究 从 Claude Code Skills 机制到产品级 AI 落地的底层逻辑 把 Claude Code Skills 装进 JAR 包——积木报表的破局思路积木报表(JimuReport)v2.5.0 做了一件在国内低代码工具里头一次的事:把 Claude
48 0
内置Claude Skills怎么玩?AI 产品智能化的下一个标准配置
|
2月前
|
人工智能 Shell C++
Claude Code Loop 快速入门:从一行命令到自动迭代
JeecgBoot AI专题研究 Claude Code 自动迭代 Loop 模式从零上手实战指南![Claude Code Loop 快速入门封面——AI自动迭代循环示意图](https://oscimg.oschina.net/oscnet/up5f894f1c4de391c13822180
202 0
Claude Code Loop 快速入门:从一行命令到自动迭代
|
5月前
|
人工智能 JavaScript 前端开发
JeecgBoot低代码平台 Ant Design Vue 4.x 升级避坑指南
Ant Design Vue 4.x 是一次底层架构级的大版本升级,最显著的变化是彻底抛弃了 Less 预处理器,转向 CSS-in-JS 方案。对于基于 JeecgBoot低代码平台(3.6.2+ 版本)的项目来说,这次升级涉及 API 命名规范、主题系统、样式权重等多个维度的适配工作。 本文将逐一梳理升级过程中的关键变更点,帮助你在最短时间内完成平稳迁移。 4.x 版本对多个组件的属性名进行了统一规范化处理,主要涉及三类命名变更:
505 2
|
5月前
|
机器学习/深度学习 人工智能 自动驾驶
城市道路设施及道路安全隐患数据集分享(适用于YOLO系列深度学习分类检测任务)
本数据集含1.3万张城市道路图像,涵盖井盖、坑洞、减速带等5类安全隐患,YOLO格式标注,已划分训练/验证/测试集,适用于YOLOv5-v10等目标检测模型,助力智能巡检、自动驾驶与智慧交通研究。(239字)
514 7
|
5月前
|
人工智能 Linux API
OpenClaw是什么?OpenClaw能做什么?2026年OpenClaw介绍及部署保姆级图文教程
在AI智能体快速普及的2026年,OpenClaw(曾用名Clawdbot、Moltbot)作为一款开源AI Agent框架,凭借“本地优先、模块化技能、多通道接入”的核心优势,成为连接大模型与本地系统的核心工具,无需专业开发能力,新手也能快速上手,实现自动化办公、数据抓取、系统运维等多种场景需求。本文将全面解析OpenClaw的核心定位与功能,详细拆解2026年新手零基础下阿里云部署、MacOS/Linux/Windows11本地部署的完整流程,同步讲解阿里云百炼API配置方法,并汇总高频常见问题及解决方案,全程附带可直接复制的代码命令,确保零基础用户也能顺利完成部署与使用。
3506 15
|
5月前
|
人工智能 前端开发 JavaScript
JeecgBoot低代码平台作为 Qiankun 子应用接入指南
在某些企业架构中,JeecgBoot低代码平台并非作为独立系统运行,而是需要嵌入到已有的微前端体系中,作为一个子应用被其他主应用调度和管理。典型场景包括:集团统一门户集成、多系统聚合平台、渐进式系统迁移等。 本文将详细介绍如何将 JeecgBoot-Vue3 前端项目配置为 Qiankun 微前端框架的子应用。 在你的 Qiankun 主应用中,需要注册 JeecgBoot低代码子应用的基本信息: name: 'jeecg-sub-app',
288 2
|
11月前
|
前端开发 NoSQL Java
jeecg-boot
JeecgBoot 是一个基于 Spring Boot 和 Vue3 的低代码开发平台,支持快速构建企业级应用。平台提供源码下载、技术架构清晰,涵盖前后端详细配置及代码生成指南。用户可通过 GitHub 获取源码,使用 IDEA 和 WebStorm 开发,结合 MySQL、Redis 等组件实现系统搭建。平台内置代码生成功能,支持表单开发、菜单配置与权限管理,便于快速实现增删改查等业务需求。
 jeecg-boot