背景

最近在學習RxJS，平時邊看文件邊順手就敲一敲那些API，有時候想回顧一些自己寫的東西，就要先把專案跑起來，這也難免有些麻煩。於是乎，就想著把自己寫的這個小專案打包成桌面端，方面每次開啟電腦就能看。經過網上查閱，比較成熟的解決方案很多，比如electron，nw.js等等。最終選定用electron，因為他的星星最多，哈哈。

這個練手Rxjs的小專案是用vue跑的，之前沒玩過vue，順手玩一下。打包桌面端，跟前端框架無關，只是想誇一下vue在構建專案上的體驗真的好，簡單方便，會以yes or no的形式讓你完成一個主流的前端框架（回想以前構建angular應用，還要開啟help，看一大堆api，在這一點使用者體驗上angular真是輸了，不知道最近的ng5變沒變

electron

Electron uses Chromium and Node.js so you can build your app with HTML, CSS, and JavaScript. Open Source Cross Platform Compatible with Mac, Windows, …

簡單來說，electron是基於Chromium 和 Node.js 來構建一個跨平臺應用的。Chromium是一個開源瀏覽器，與chrome區別是不會自動更新，但是一些新特性貌似會在Chromium先上。

electron-quick-start

最開始的時候，沒敢直接在vue中插入這個electron(畢竟連怎麼用都不知道)，於是先clone了一個starter來快速學習一下。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install //這裡我用的是cnpm,npm太慢了 
npm start

專案跑起來之後，不出意外就出現了electron的桌面端頁面，看了下其中的入口檔案main.js

 mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  
 
}))

這段程式碼就是配置桌面端應用的入口，於是果斷去把vue的專案打包，直接把前端靜態資源扔到這裡，替換之前的檔案。然後繼續執行npm run start，然後白屏（習慣性的首次失敗。。），不過問題也很快解決了，因為vue打包專案，預設使用的是絕對路徑，所以到這裡就有點小問題。解決方法：

進入config資料夾下的index.js將其中的assetsPublicPath修改為相對路徑 ./。

再次執行npm run start，成功將vue的專案，顯示為桌面應用。

此時還是在electron的starter專案當中，這樣顯然太麻煩了，於是下面就將electron引入 vue。

vue 中引入electron

首先在vue專案的package.json中加入electron的依賴，

cnpm install electron --save-dev 
cnpm install electron-packager --save-dev //這個是打成exe檔案的外掛，之後要用，提前下載好

把electron-quick-start專案中的main.js搬到vue的build檔案中，並改個名字electron.js。

因為檔案的相對位置進行了改變，electron的入口檔案變成了vue build之後的檔案地址，也就是dist資料夾下的 index.html，所以此時的electron.js 裡面的引用地址也要變，即：

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '../dist/index.html'),
    protocol: 'file:',
    slashes: true
  }))

在package.json檔案中增加一條指令，用來啟動electron，即：

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "electron_dev": "npm run build && electron build/electron.js"
  },

electron_dev 就是用來啟動electron的，在此之前我們一定要確保專案當中已經有構建好的靜態資原始檔，因此 在執行 electron build/electron.js 之前，首先執行 npm run build。

經過這樣的處理，在命令列中，執行 npm run electron_dev之後，就會將之前在electron-quick-start中顯示的桌面應用，再次顯示出來。

到這一步，一直非常順利，然而就在一切都理所應當的時候，打包exe檔案出現了問題。

打包exe檔案

以上這些東西自己連調帶試的搞了1小時左右吧，沒看時間，反正我覺得挺快。然而，之後打包這個exe就花了1個小時還多！心好累。。。

首先，為之前下載好的electron-packager，增加一條啟動命令。

 "scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite"
  },

關於electron-packager的配置，簡單介紹一下。
electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]

• sourcedir 資源路徑，在本例中既是./dist/
• appname 打包出的exe名稱
• platform 平臺名稱（windows是win32）

• arch 版本，本例為x64

  後邊的配置項都是選填，可以設定二進位制打包等，預設是沒有這些的，這裡只選填了exe的圖示。

npm run electron_build

執行打包exe的命令，還是一如既往的順利，專案中成功出現打包好的資料夾，但是去資料夾中啟動exe時，狀況發生了。

報錯說找不到一個合法的app，什麼鬼。。。
谷歌上搜了半天，有說版本不對，重新下載node模組的，有說路徑不對的。其中我看到報錯指向了asar，可我明明沒有設定二進位制打包啊，於是跟這個asar鬥爭了很久。

最後發現跟這個asar屁關係沒有！

在看到有相關問題出現的談論下，看到解決方案是沒有把package.json放入資料夾，開始還搞不明白為什麼還要一個package.json ，後來翻回頭來才發現自己太想當然了，以為dist/下是去拿index.html，其實人家是要去拿package，然後再去找入口的js，最後才去找index.html.

於是先手動在dist資料夾下增加electron.js和package.json。

package的main指向從build資料夾中複製來的electron.js（記得把electron.js中index.html的路徑做修改）

 mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

再次執行npm run electron_build得到打包好的資料夾，找到其中的*.exe，雙擊執行，終於又出現了熟悉的畫面。

總結

至此，vue打包桌面端就這樣完成了。在此過程中，發現自己做東西還是有些武斷，太想當然了，導致在一些彎路里繞了很久。以後還是要多看文件，穩紮穩打！