electron原来这么简单----打包你的react、VUE桌面应用程序
发布时间:2020-12-15 06:31:08 所属栏目:百科 来源:网络整理
导读:也许你不甘心只写网页,被人叫做“他会写网页”,也许你有项目需求,必须写桌面应用,然而你只会前端,没关系。网上的教程很多,但是很少有能说的浅显易懂的,我尽力将electron打包应用说的清晰明了,希望能你在写自己的应用的时候,感到心中有数。话不多说
一、安装electron
二、run build
三、创建入口文件和配置基于之前index.html已经能正常展示的前提下,在你项目build文件夹中创建以下2个文件 main.js const electron = require('electron'); // 控制应用生命周期的模块 const {app} = electron; // 创建本地浏览器窗口的模块 const {BrowserWindow} = electron; // 指向窗口对象的一个全局引用,如果没有这个引用,那么当该javascript对象被垃圾回收的 // 时候该窗口将会自动关闭 let win; function createWindow() { // 创建一个新的浏览器窗口 win = new BrowserWindow({width: 1920,height: 1080}); // 并且装载应用的index.html页面 win.loadURL(`file://${__dirname}/index.html`); // 打开开发工具页面 //win.webContents.openDevTools(); // 当窗口关闭时调用的方法 win.on('closed',() => { // 解除窗口对象的引用,通常而言如果应用支持多个窗口的话,你会在一个数组里 // 存放窗口对象,在窗口关闭的时候应当删除相应的元素。 win = null; }); } // 当Electron完成初始化并且已经创建了浏览器窗口,则该方法将会被调用。 // 有些API只能在该事件发生后才能被使用。 app.on('ready',createWindow); /* var mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: false } }); */ // 当所有的窗口被关闭后退出应用 app.on('window-all-closed',() => { // 对于OS X系统,应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出 if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate',() => { // 对于OS X系统,当dock图标被点击后会重新创建一个app窗口,并且不会有其他 // 窗口打开 if (win === null) { createWindow(); } }); // 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。 // 也可以把这些代码放在另一个文件中然后在这里导入。 这里贴的别人的代码,你如果想修改,学习electron去吧,这里只是简单介绍。 { "name":"crh_chat","version":"1.0-test","main":"main.js","author": { "name":"YOURNAME" },"license": "MIT" }
四、打包在build文件夹下打开命令行 electron-packager . crh-chat --win --out=release --arch=x64 --version=1.0.0 --electron-version=1.8.4 --overwrite --icon=./favicon.ico 这是我的,具体参数你得根据自己的修改,使用如下
多说一嘴,如果你的react项目index页面死活出不来,可能是你使用了react-router的BroswerHistory,换成HashHistory就可以了。VUE项目出不来的话,很大可能是使用了history路由模式,改成hash路由模式就可以了 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |