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

2019年8月24日 150次阅读 来源: 懒懒的技术宅
  • 或许你不甘心只写网页，被人叫做“他会写网页”，或许你有项目需求，必需写桌面运用，然则你只会前端，没紧要。网上的教程许多，然则很少有能说的浅显易懂的，我全力将electron打包运用说的清楚清楚明了，希望能你在写本身的运用的时刻，觉得胸有定见。话不多说，进入正题：

一、装置electron

  • 为了轻易你今后的运用，发起全局装置。今后在任何文件夹都能运用electron。怎样装置就不空话了，不会的去官网，装置好electron以后也装置一个专用的打包东西electron-packager，以轻易我们背面打包的时刻运用。

二、run build

  • 你的react项目写完后（实在写到一半，四分之一你随便，只需页面上有点内容了），实行 npm run
    build,会在build文件夹下面天生以下图所示的构造： 《electron本来这么简朴----打包你的react、VUE桌面应用程序》
  • 这时刻，你试着点击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

这是我的，详细参数你得依据本身的修正，运用以下

《electron本来这么简朴----打包你的react、VUE桌面应用程序》

  • 图上的–out是天生文件夹的名字，内里有一堆的dll, 实行完成，就能够在你的out文件夹中看到可实行顺序了 点击一下，就胜利的跑起来了

《electron本来这么简朴----打包你的react、VUE桌面应用程序》

  • 就这么完毕了，react build的文件能在非服务器环境跑起来真是轻易极了，

多说一嘴，假如你的react项目index页面死活出不来，多是你运用了react-router的BroswerHistory，换成HashHistory就能够了。
VUE项目出不来的话，很大多是运用了history路由形式，改成hash路由形式就能够了

    原文作者：懒懒的技术宅
    原文地址: https://segmentfault.com/a/1190000014030465
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞