• 也许你不甘心只写网页,被人叫做“他会写网页”,也许你有项目需求,必须写桌面应用,然而你只会前端,没关系。网上的教程很多,但是很少有能说的浅显易懂的,我尽力将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桌面应用程序的更多相关文章

  1. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  2. Electron打包H5网页为桌面运行程序

    一.安装配置环境 Electron(一种桌面应用程序运行时),Electron 把 Chromium 和 Node 合并到一个单独的运行时里面,很适合开发桌面 web 形式的应用程序,通过Node它提 ...

  3. RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景?

    RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...

  4. 【Electron】Electron开发入门(六):项目生成setup安装程序

    把electron发布的exe打包成setup安装程序,需要使用nsis软件, nsis打包的详细教程,可以参考我的这篇文章: win7下nsis打包exe安装程序教程

  5. C#—使用InstallerProjects打包桌面应用程序

    前言 打包桌面应用程序实在是一个不常使用的东西,偶尔使用起来经常会忘东忘西的耽误时间,因此,这篇文章多以图片记录过程,也是用于备忘. 下载打包工具 C#打包桌面应用程序有很多种方法,这里介绍一种使用M ...

  6. React / Vue 跨端渲染原理与实现探讨

    跨端渲染是渲染层并不局限在浏览器 DOM 和移动端的原生 UI 控件,连静态文件乃至虚拟现实等环境,都可以是你的渲染层.这并不只是个美好的愿景,在今天,除了 React 社区到 .docx / .pd ...

  7. 下载企业级证书打包的app 出现“无法下载应用程序”的问题

    问题描述:在下载企业级证书打包的app 出现“无法下载应用程序”的问题 解决办法:原来是生成plist文件时,设置url犯了一个致命的低级错误.如下

  8. react与微信小程序

    由组员完成 原文链接 都说react和微信小程序很像,但是像在什么部分呢,待我稍作对比. 生命周期 1.React React的生命周期在16版本以前与之后发生了重大变化,原因在于引入的React F ...

  9. 富文本编辑器TinyMCE的使用(React Vue)

    富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...

随机推荐

  1. zookeeper 分布式协调服务

    分布式协调服务作用是将多机协调的职责从分布式应用中独立出来,以减少系统的耦合性和增加扩展性. 而zookeeper采用分布式中经典的主从架构:master->slave,通常以动态的存储分布式应 ...

  2. shell学习笔记2---执行Shell脚本(多种方法)

    在新进程中运行 Shell 脚本 1) 将 Shell 脚本作为程序运行 切换到脚本所在位置(还要给脚本加上可执行权限) [mozhiyan@localhost demo]$ ./test.sh #执 ...

  3. nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG

    需求描述,由于工作的需要,需要将原本用于1280 720的网页改为1920 1080的网页(电视端页面).需求可以拆分为两部分,代码部分的修改以及图片的修改.在代码部分,需要将所有位置以及大小相关的值 ...

  4. 使用Docker部署Spring-Boot+Vue博客系统

    在今年年初的时候,完成了自己的个Fame博客系统的实现,当时也做了一篇博文Spring-boot+Vue = Fame 写blog的一次小结作为记录和介绍.从完成实现到现在,也断断续续的根据实际的使用 ...

  5. application session 实现简单的在线聊天人数的统计

    写了快一年的asp.net,application对象还真没怎么用过.看了看书,根据这两个对象的特性写了一个简单的聊天室程序.真的是非常的简陋 ASP.Net中有两个重要的对象,一个是applicat ...

  6. windows套接字阻塞模式编程实例

    一.阻塞模式套接字服务端和客户端的运行流程如下: 1.1 服务器运行过程如下: 1.服务器启动后,等待客户端的连接请求.2.当收到客户端的请求后,在界面上显示该客户端的IP地址和端口,以及“Hello ...

  7. vue+element ui 时间格式化

    <el-table-column prop="startTime" label="日期" width="200" align=&quo ...

  8. 初学ctypes:打开进程并返回相关信息

    直接上代码: 1. my_debugger_defines.py 定义相关结构体(在后面创建进程及返回信息时,传参可用到) from ctypes import * # Let's map the M ...

  9. IPv6地址格式示例及IPv6与IPv4的区别分析

    认识IPv6地址 IPv4地址是类似 A.B.C.D 的格式,它是32位,用\".\"分成四段,用10进制表示: 而IPv6地址类似X:X:X:X:X:X:X:X的格式,它是128 ...

  10. 主流Linux发行版及联系

    一.主流Linux主流发行版 RedHat:Red Hat Linux是由Red Hat公司发行的一个Linux发行包.其1.0版本于1994年11月3日发行,虽然其历史不及Slackware般悠久, ...