使用Electron快速将B/S应用构建为桌面应用

借助Electron可以用来非常轻易的构建跨平台桌面应用，因为你只需要熟悉html、css、javascript这些基本技能就可以快速构建一个简单应用。
这意味着我们可以借助Electron来打包我们的B/S应用伪装成一个本地应用,这不仅可以提高传统用户的亲和度还可以免去不要用ie装谷歌; 怎么装谷歌,360可以吗?的烦恼\扩大可视区域(免去地址栏菜单栏等)\快速打开应用(无需打开浏览器翻收藏夹)等一系列好处。
那么下面的内容就是告诉你如何快速打包一个伪桌面应用

前提:

nodejs
yarn

1.安装

可以执行如下命令,更多详细内容可以查看官网安装文档

1	yarn global add electron

2.创建入口配置 main.js

const electron = require('electron');
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;

// 指向窗口对象的一个全局引用，如果没有这个引用，那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;

function createWindow() {
    // 创建一个新的浏览器窗口
    win = new BrowserWindow();
    // 打开后最大化窗口
    win.maximize();
    // 并且装载应用的index.html页面
    win.loadURL(`http://localhost:8000/#/user/login`);
    
    // 如果是前后端分离得项目可以按如下方式书写
    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();
    }
});

// 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。
// 也可以把这些代码放在另一个文件中然后在这里导入。

3.创建打包配置 package.json

可以通过 yarn init或新建文件得方式创建此文件

{
  "name": "Evatron",
  "version": "1.0.0",
  "description": "Eva desktop",
  "main": "main.js",
  "author": "PKAQ",
  "license": "MIT"
}

4.打包

安装打包管理器

yarn global add electron-packager
```   
执行打包   
```bash
npx electron-packager . Evatron 
	--win --out=release 
    --arch=x64 
    --version=1.0.0 
    --electron-version=2.0.0 
    --overwrite 
    --icon=./favicon.ico

命令解释

. ：打包入口
Evatron ：打包文件名
--win --out=release --arch=x64 ：生成win64类型文件
--version=1.0.0 ：生成的文件版本
--electron-version=2.0.0 ：electron版本,可以通过electron --version查看
--overwrite ：是否覆盖之前的打包文件
--icon=./favicon.ico ：favicon

打包后会在命令目录生成一个release文件夹点击里面生成的exe可以查看我们的桌面程序

p.s:如果你的react项目index页面死活出不来，可能是你使用了react-router的BroswerHistory，换成HashHistory就可以了。

参考：https://segmentfault.com/a/1190000014030465

如是我闻

1.安装

2.创建入口配置 main.js

3.创建打包配置 package.json

4.打包