当前位置: 首页 > news >正文

electron原来这么简单----打包你的react、VUE桌面应用程序

  • 也许你不甘心只写网页,被人叫做“他会写网页”,也许你有项目需求,必须写桌面应用,然而你只会前端,没关系。网上的教程很多,但是很少有能说的浅显易懂的,我尽力将electron打包应用说的清晰明了,希望能你在写自己的应用的时候,感到心中有数。话不多说,进入正题:

一、安装electron

  • 为了方便你以后的使用,建议全局安装。以后在任何文件夹都能使用electron。怎么安装就不废话了,不会的去官网,安装好electron之后也安装一个专用的打包工具electron-packager,以方便我们后面打包的时候使用。

二、run build

  • 你的react项目写完后(其实写到一半,四分之一你随意,只要页面上有点内容了),执行 npm run
    build,会在build文件夹下面生成如下图所示的结构: 图片描述
  • 这时候,你试着点击index.html看看(无需放到服务器静态资源目录),如果能看到内容,就是ok的,如果一片白屏,控制台没错误提示,那么你只要在package.json里面添加一个"homepage":'./',再次执行build,就可以看到内容了。
  • 如果你index.html没内容,就不要往下继续了,检查你的项目是否存在路径问题。

三、创建入口文件和配置

基于之前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去吧,这里只是简单介绍。
package.json

{
    "name":"crh_chat",
    "version":"1.0-test",
    "main":"main.js",
    "author": {
        "name":"YOURNAME"
    },
    "license": "MIT"
}
  • 做完这两件事基本上就ok了。

四、打包

在build文件夹下打开命令行

electron-packager . crh-chat --win --out=release --arch=x64 --version=1.0.0 --electron-version=1.8.4 --overwrite --icon=./favicon.ico

这是我的,具体参数你得根据自己的修改,使用如下

图片描述

  • 图上的--out是生成文件夹的名字,里面有一堆的dll, 执行完成,就可以在你的out文件夹中看到可执行程序了 点击一下,就成功的跑起来了

图片描述

  • 就这么结束了,react build的文件能在非服务器环境跑起来真是方便极了,

多说一嘴,如果你的react项目index页面死活出不来,可能是你使用了react-router的BroswerHistory,换成HashHistory就可以了。
VUE项目出不来的话,很大可能是使用了history路由模式,改成hash路由模式就可以了

相关文章:

  • 36.Azure制作自定义的Windows虚拟机映像
  • apollo客户端springboot实战(四)
  • python 全栈开发,Day4
  • 概率生成函数学习笔记
  • Qt托盘程序
  • LayaAir疑难杂症之一:List渲染无法生效
  • Spring aop详解
  • 解决Linux下普通用户无法使用root连接MySQL服务
  • BZOJ4514: [Sdoi2016]数字配对(费用流)
  • Leetcode PHP题解--D10 942. DI String Match
  • Java学习笔记之ArrayList基本用法
  • 阿里巴巴2020届校招实习生内推开始啦
  • ionic3 学习记录
  • 【虾说区块链】搞懂P2P网络,再谈区块链!P2P网络概念扫盲帖
  • 三、分别用for、while、do-while、循环语句以及递归方法计算n!,并输出算式。
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • 0基础学习移动端适配
  • 2017年终总结、随想
  • CSS魔法堂:Absolute Positioning就这个样
  • eclipse的离线汉化
  • go语言学习初探(一)
  • Hibernate【inverse和cascade属性】知识要点
  • Java读取Properties文件的六种方法
  • Java面向对象及其三大特征
  • MD5加密原理解析及OC版原理实现
  • miniui datagrid 的客户端分页解决方案 - CS结合
  • mockjs让前端开发独立于后端
  • nodejs:开发并发布一个nodejs包
  • Promise面试题,控制异步流程
  • Sass Day-01
  • thinkphp5.1 easywechat4 微信第三方开放平台
  • TypeScript迭代器
  • Vue--数据传输
  • 安装python包到指定虚拟环境
  • 干货 | 以太坊Mist负责人教你建立无服务器应用
  • 关于Flux,Vuex,Redux的思考
  • 免费小说阅读小程序
  • 微信开放平台全网发布【失败】的几点排查方法
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 云栖大讲堂Java基础入门(三)- 阿里巴巴Java开发手册介绍
  • 职业生涯 一个六年开发经验的女程序员的心声。
  • No resource identifier found for attribute,RxJava之zip操作符
  • Spring Batch JSON 支持
  • 如何用纯 CSS 创作一个菱形 loader 动画
  • ​【C语言】长篇详解,字符系列篇3-----strstr,strtok,strerror字符串函数的使用【图文详解​】
  • ​DB-Engines 12月数据库排名: PostgreSQL有望获得「2020年度数据库」荣誉?
  • !$boo在php中什么意思,php前戏
  • # Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
  • # 数论-逆元
  • #每天一道面试题# 什么是MySQL的回表查询
  • (bean配置类的注解开发)学习Spring的第十三天
  • (二)hibernate配置管理
  • (附源码)计算机毕业设计ssm基于Internet快递柜管理系统
  • (附源码)计算机毕业设计SSM智慧停车系统
  • (牛客腾讯思维编程题)编码编码分组打印下标(java 版本+ C版本)