electron原來這麼簡單----打包你的react、VUE桌面應用程序

• 也許你不甘心只寫網頁，被人叫作「他會寫網頁」，也許你有項目需求，必須寫桌面應用，然而你只會前端，不要緊。網上的教程不少，可是不多有能說的淺顯易懂的，我盡力將electron打包應用說的清晰明瞭，但願能你在寫本身的應用的時候，感到心中有數。話很少說，進入正題：

1、安裝electron

• 爲了方便你之後的使用，建議全局安裝。之後在任何文件夾都能使用electron。怎麼安裝就不廢話了，不會的去官網，安裝好electron以後也安裝一個專用的打包工具electron-packager，以方便咱們後面打包的時候使用。

2、run build

• 你的react項目寫完後（其實寫到一半，四分之一你隨意，只要頁面上有點內容了），執行 npm run
  build,會在build文件夾下面生成以下圖所示的結構：
• 這時候，你試着點擊index.html看看（無需放到服務器靜態資源目錄），若是能看到內容，就是ok的，若是一片白屏，控制檯沒錯誤提示，那麼你只要在package.json裏面添加一個"homepage":'./',再次執行build，就能夠看到內容了。
• 若是你index.html沒內容，就不要往下繼續了，檢查你的項目是否存在路徑問題。

3、建立入口文件和配置

基於以前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了。

4、打包

在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路由模式就能夠了