最近,在工作中需要使用electron将公司已有网页端项目打包成程序安装包,可以简单的理解一下,Electron为web项目套上了Node.js环境的壳,来实现桌面端应用的开发,比如我们常用的vscode就是基于electron进行开发的。
因为公司原有项目是vue2框架开发,一开始尝试使用引入electron的方法,这种方式会生成一个background.js文件作为项目主进程文件,在vue.config.js中配置nais(安装配置)等信息,但是使用第一种方法得到的是执行程序,而不是安装程序。
如果和我情况差不多的话,建议使用第二种方法,使用electron-builder进行项目的打包,在这里我准备了一个壳子,晚点会发到git上,需要可以自取,在文件中的配置信息都有详细的注释
主要的实现方法就是将原来项目打成dist包,然后在壳子里的main.js主进程文件中指定加载文件位置
mainWindow.loadFile('dist/index.html')
再通过electron打包命令打包,会在指定位置生成.exe安装程序,在这里,我指定的位置是根目录下的exe文件
这样不会干扰原来项目,也可以达到想要效果,对于新接触electron的人来说最为方便
注意:原项目中可能会使用一些基于浏览器机制所支持的语句,简单举例,类如alert弹窗,window.open 等语句,在项目打包成桌面端应用后将不再支持,需要进行修改,否则可能会出现一些系统bug