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

shevy 发布于2019-08-22 15:49 / 2454人阅读

摘要：话不多说，进入正题一安装为了方便你以后的使用，建议全局安装。怎么安装就不废话了，不会的去官网，安装好之后也安装一个专用的打包工具，以方便我们后面打包的时候使用。有些只能在该事件发生后才能被使用。

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

云服务器 GPU云服务器简单java程序打包 webrtc结合electron桌面分享 vue webrtc 桌面共享小程序是这么做的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93784.html

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

摘要：话不多说，进入正题一安装为了方便你以后的使用，建议全局安装。怎么安装就不废话了，不会的去官网，安装好之后也安装一个专用的打包工具，以方便我们后面打包的时候使用。有些只能在该事件发生后才能被使用。也许你不甘心只写网页，被人叫做他会写网页，也许你有项目需求，必须写桌面应用，然而你只会前端，没关系。网上的教程很多，但是很少有能说的浅显易懂的，我尽力将electron打包应用说的清晰明了，希...

suemi 2019-08-02 10:02 评论0 收藏0
使用 electron-vue 构建你的桌面应用

摘要：翻译一下它是一个运行时，可以像一样这样执行也是一个使用构建跨平台原生桌面应用的框架。具有两个进程，分别是主进程，以及渲染进程。什么是 electron 官网里这么说：Electron提供了一个Nodejs的运行时，专注于构建桌面应用，同时使用web页面来作为应用的GUI，你可以将其看作是一个由JavaScript控制的迷你版的Chromium浏览器。翻译一下：它是一个运行时，可以像...

qieangel2013 2019-08-21 17:21 评论0 收藏0
如何使用前端技术开发一个桌面跨端应用

摘要：使用实现桌面应用实现离线可用很多方法，比如使用技术。还有一个好处，因为它完全基于来实现可以使用的一些新功能，那我们理论上可以在做桌面应用时顺手把应用也做了。本文将会讲述一个完整的跨端桌面应用代码画板的构建，会涉及到整个软件开发流程，从开始的设计、编码、到最后产品成型、包装等。本文不仅仅是一篇技术方面的专业文章，更会有很多产品方面的设计思想和将技术转换成生产力的思考，我将结合我自...

shixinzhang 2019-08-23 15:53 评论0 收藏0
使用React、Electron、Dva、Webpack、Node.js、Websocket快速构建

摘要：是一个使用和等技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。谈谈技术选型使用去做底层的绘制，大项目首选状态管理的最佳实践肯定不是，目前首选，或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已经快要跟React-nativ...

Caicloud 2019-08-30 11:01 评论0 收藏0