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路由模式就可以了
electron原来这么简单----打包你的react、VUE桌面应用程序的更多相关文章
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- Electron打包H5网页为桌面运行程序
一.安装配置环境 Electron(一种桌面应用程序运行时),Electron 把 Chromium 和 Node 合并到一个单独的运行时里面,很适合开发桌面 web 形式的应用程序,通过Node它提 ...
- RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景?
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
- 【Electron】Electron开发入门(六):项目生成setup安装程序
把electron发布的exe打包成setup安装程序,需要使用nsis软件, nsis打包的详细教程,可以参考我的这篇文章: win7下nsis打包exe安装程序教程
- C#—使用InstallerProjects打包桌面应用程序
前言 打包桌面应用程序实在是一个不常使用的东西,偶尔使用起来经常会忘东忘西的耽误时间,因此,这篇文章多以图片记录过程,也是用于备忘. 下载打包工具 C#打包桌面应用程序有很多种方法,这里介绍一种使用M ...
- React / Vue 跨端渲染原理与实现探讨
跨端渲染是渲染层并不局限在浏览器 DOM 和移动端的原生 UI 控件,连静态文件乃至虚拟现实等环境,都可以是你的渲染层.这并不只是个美好的愿景,在今天,除了 React 社区到 .docx / .pd ...
- 下载企业级证书打包的app 出现“无法下载应用程序”的问题
问题描述:在下载企业级证书打包的app 出现“无法下载应用程序”的问题 解决办法:原来是生成plist文件时,设置url犯了一个致命的低级错误.如下
- react与微信小程序
由组员完成 原文链接 都说react和微信小程序很像,但是像在什么部分呢,待我稍作对比. 生命周期 1.React React的生命周期在16版本以前与之后发生了重大变化,原因在于引入的React F ...
- 富文本编辑器TinyMCE的使用(React Vue)
富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...
随机推荐
- 【Linux-驱动】驱动策略----信号量
访问共享资源的代码区块叫“临界区”,临界区需要以某种互斥机制加以保护:自旋锁.信号量等.互斥访问:一个执行单元在访问共享资源的时候,其他的执行单元被禁止访问. 信号量:在Liunx中的信号量是一种睡眠 ...
- 高级BASH
Bash介绍与入门 1,简介 Bash(GNU Bourne-Again Shell)是一个为GNU计划编写的Unix shell,它是许多Linux平台默认使用的shell shell是一个命令解释 ...
- ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;
参考来源:https://blog.csdn.net/yuxinha11/article/details/80090197 ENGINE=InnoDB不是默认就是这个引擎吗?——是的,如果不写也是ok ...
- anconda下安装opencv
提示:如果你安装了python其它版本,或者在anaconda中创建了虚拟环境,应该先激活你的环境,然后再在命令窗口执行下面的操作 1.首先下载所需镜像文件: 我们需要上网站去下载我们需要的版本. 官 ...
- Django文档——Model中的ForeignKey,ManyToManyField与OneToOneField 关联关系字段 (Relationship fields)
ForeignKey,ManyToManyField与OneToOneField分别在Model中定义多对一,多对多,一对一关系. 例如,一本书由一家出版社出版,一家出版社可以出版很多书.一本书由多个 ...
- IOS绘图详解(http://blog.163.com/wkyuyang_001/blog/static/10802122820133190545227/)
14.1 Quartz概述 Quartz是Mac OS X的Darwin核心之上的绘图层,有时候也认为是CoreGraphics.共有两种部分组成Quartz: Quartz Compositor,合 ...
- 006-(成功环境记录)基于Centos7系统部署cobbler批量安装系统
1.1 cobbler简介 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等. Cobbler可以使 ...
- django + celery的队列,路由与弹性
#celery_app.py #!/usr/bin/env python # -*- coding: utf-8 -*- from __future__ import absolute_import ...
- python 写matlab中的加性高斯白噪声AWGN
定义 原始信号:x 噪声信号:n 信噪比:SNR 信号长度:N def wgn(x, snr): snr = 10**(snr/10.0) xpower = np.sum(x**2)/len(x) n ...
- ocvate常用函数
1.生成矩阵相关 https://www.coursera.org/learn/machine-learning/lecture/9fHfl/basic-operations 1. 初始化矩阵 a = ...