摘要：于是乎，就想著把自己寫的這個小項目打包成桌面端，方面每次打開電腦就能看。然后繼續運行，然后白屏習慣性的首次失敗。。解決方法進入文件夾下的將其中的修改為相對路徑。再次運行，成功將的項目，顯示為桌面應用?？偨Y至此，打包桌面端就這樣完成了。

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

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

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先上。

最開始的時候，沒敢直接在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項目的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文件出現了問題。

以上這些東西自己連調帶試的搞了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 --platform= --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打包桌面端就這樣完成了。在此過程中，發現自己做東西還是有些武斷，太想當然了，導致在一些彎路里繞了很久。以后還是要多看文檔，穩扎穩打！

項目地址：https://github.com/jiwenjiang...