如何将electron框架开发的软件包打包成单一exe文件

一步一步的跟着做：单击File，选择NEW，然后点击旁边的树形的Archive选项卡，然后再Archive选项卡中选择AppletJAR，取个名字，然后直接点击Finish，这个时候运行一下程序，让其编译一下，会在源码中得到一个JAR文件，有了这个文件以后，就可以停止程序，接着在单击File，选择NEW，还是点击Archive选项卡，这次选择ExecutableJAR，然后取名字，再点击JARFile输入框后面的按钮，找到刚才生成的JAR文件，添加进去，一路NEXT，最后Finish以后，再次运行程序，这个时候就会在源码文件夹中多出啦两个exe文件，一个是通过控制台运行的，一个是直接运行的，同样，exe文件要想运行，还是需要JDK，不过这里建议不要使用sun公司下载的JDK，直接使用Jbuilder里面的JDK～

将自己项目打包好的dist文件中的indexhtml和其他文件放入electron-quick-start(根目录)文件夹中，重新start一下项目集成到了electron中，下一步就是打包生成我们需要的桌面端exe文件。electron中默认带有顶部菜单栏，有时候我们的应用不需要。可以在mainjs中设置，隐藏菜单Electron实战：入门、进阶与性能优化》国内首本全面讲解Electron技术栈和运行原理的原创图书。以实战为导向，讲解了如何用Electron结合现代前端技术来开发桌面应用。书中不仅全面介绍了Electron入门需要掌握的功能和原理，而且还针对Electron开发中的重点和难点进行了重点讲解，旨在帮助读者实现快速进阶。本书遵循渐进式的原则逐步传递知识给读者，书中以Electron知识为主线并对现代前端知识进行了有序的整合，对易发问题从深层原理的角度进行讲解，对普适需求以实践的方式进行讲解，同时还介绍了Electron生态内的大量优秀组件和项目。在做Electron Windows 桌面应用时候，做鼠标悬浮到托盘图标上时显示一个悬浮框（例如做消息提醒），但因为Windows没有提供托盘mouse-enter/mouse-leave事件，无法直接做这个功能，考虑到还有mouse-move事件，弄个间接的方式实现。监听mouse-move事件，当触发时，即也相当触发mouse-enter事件。开始定时（100ms）获取托盘位置和鼠标位置，判断鼠标是否还在托盘图标里，当已不在时，触发mouse-leave事件并停止定时查询。当mouse-enter时，显示悬浮窗口到托盘上方，当mouse-enter，隐藏悬浮窗口。因为是无边框窗口，所以原先的导航栏都没有了，需要我们自定义这些按钮。UI我就不具体介绍了，大家自己看一下就好，我们只讲效果实现。自定义按钮我们是放在了src-renderer-layout-layout文件中的v-toolbar 组件中。 因为标题需要需要拖拽，所以我们给它加上样式但是设置了drag之后，可以看到就不能通过鼠标进行大小缩放了，边框上不会出现缩放箭头，所以需要处理下，我们不再对整个toolbar进行drag设置，而是仅仅设置在几个需要拖动的区域，但是不能设置高度为100%，否则还是不显示缩放箭头，所以我设置了v-spacer的高度为90%。核心代码如下，代码比较简单，也不用ipc通知mainWindow了，直接remote模块做的了。有个坑，就是browserWindowisMaximized()这个判断并不是很好使，不信你可以自己试一下，和你预期有差别。我这里只能用页面判断了，但也不是特别好使，特别是开发过程中热重载的时候。有解决方案的同志可以回复下。双击顶部的工具栏，我们可以看到窗口能最大化，但是这样影响我们页面的最大化判断，所以需要去掉它，而且右键也能显示出原始窗体菜单，并不好看。网络上其他的解决方案我搜到两个，一是监控鼠标移动，这个方案会出现闪烁问题，不推荐。另一个是使用electron-drag，不过需要rebuild你的代码，而且也有一些限制，怪麻烦的，就算了默认提供了文件、编辑、视图、窗口和帮助五个主菜单以及主菜单的子菜单，实际上这些默认的菜单，往往需要我们重新定义。我们在创建窗口的时候，设置frame为false，就是隐藏默认的标题栏和菜单。

如果只想隐藏菜单呢，就是通过设置autoHideMenuBar：true，但是在用户打开窗口后，按一下Alt键，默认菜单就恢复。在这样的情况下，我们可以自定义一个系统菜单来覆盖electron默认的菜单定义自己的菜单，需要使用electron内置的Menu模块，通过MenubuildFromTemplate方法来创建菜单对象，通过MenusetApplicationMenu方法来给窗口设置系统菜单。

所设置的菜单对象的label属性，表示是显示的文本，可以通过设置click属性，给对应的菜单添加点击事件。还有一个属性是role，属性可选值为paste、undo、redo、cut、copy、delete、selectAll、reload、minimize、close、quit等等。但是设置role后，click属性就失效了这样当我们在页面上点击鼠标右键的时候，就会触发window上的oncontextmenu事件，同时获取到鼠标的位置，然后在该位置上显示对应的菜单。如果使用这样的方法子Electron应用内创建右键菜单，这些菜单只能显示在窗口页面内部，不能悬浮在窗口之上，那么就会导致右键显示的菜单，可能只显示一部分，出现滚动条。这样体验效果并不理想。系统右键菜单思路是在主进程接收到渲染进程的右键点击事件后，Electron窗口内将显示悬浮在窗口上的系统菜单。例如，先创建菜单对象，还是使用Electron内置的Menu模块：很多应用需要常驻在用户的 *** 作系统内，但是用户又不想应用一直显示在屏幕上，也就是关掉所有的应用窗口，应用程序也一直处于运行状态，比如微信、qq等等。这样让用户可以随时激活应用。算是electron-vue的第一阶段调研。但是演示的时候却被各种否定，窗体比较大，而且设计不合理，布局方式不合理，等等等。由于在此之前没有做过这种客户端的形式，所以设计也是无从说起。

这样就可以去掉外层窗体，并且不可以进行放大缩小。但是这也导致一个问题，如果你选择不使用electron自带的frame，那么就默认你是放弃了frame的拖拽功能，所以这里需要我们自己去实现拖拽功能。无窗体的拖拽功能在开发应用的过程中，想要使得窗口在普通大小可以拖动，经常会设置该css属性：-webkit-app-region: drag; 来实现。

在窗口的最外层，即登录页面的根节点上设置该属性为drag，这样的话就可以实现窗口的拖拽，但是也会产生一个问题，一般会在最外层设置这个属性，那么在窗体的任意位置都可以进行拖拽。那我们的表单怎么办呢？如果设置在最外层，那当我们的鼠标移动到输入框，按钮等 *** 作事件上时，就会发现，不能获取到焦点，不能输入，也不能点击，这就很麻烦了。而关于-webkit-app-region的属性设置也可以找到对应的解决办法，那就是在需要事件或者需要输入的地方设置该属性不能拖拽，即-webkit-app-region: no-drag;于是，我就想到只要给表单一个div或者在表单的最外层设置这个属性为no-drag不就行了么？而事实并非如此，不明白有的表单项却不行，比如按钮，CheckBox，radio等这些，在我这里好像不能用。如果在form表单最外层不起作用，那只能退而求其次，每一项都这么设置。

1、electron管理员权限启动后出现的问题有：electron-builder搭建项目运行起来没问题，打包的时候报错，解决的方法是把node_modules文件夹删除掉，使用npminstall安装所有的模块，千万不要使用淘宝镜像安装，或者使用yarn安装模块，就可以避免这个错误。

2、Electron-Vue打包成exe一片空白。解决方法：webpackrendererconfigjs文件中注释掉Objectkeys(dependencies||{})filter(d=>。whiteListedModulesincludes(d))。

3、cannotfindmouldbytebuffer。解决方法：放在dependencies依赖，不应放在devDependencies依赖，这个与个人开发项目需求有关。

以上就是关于如何将electron框架开发的软件包打包成单一exe文件全部的内容，包括:如何将electron框架开发的软件包打包成单一exe文件、electron隐藏鼠标、electron管理员权限启动后出现的问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！