摘要：于是乎，就想著把自己寫的這個小項(xiàng)目打包成桌面端，方面每次打開電腦就能看。然后繼續(xù)運(yùn)行，然后白屏習(xí)慣性的首次失敗。。解決方法進(jìn)入文件夾下的將其中的修改為相對路徑。再次運(yùn)行，成功將的項(xiàng)目，顯示為桌面應(yīng)用。總結(jié)至此，打包桌面端就這樣完成了。

最近在學(xué)習(xí)RxJS，平時邊看文檔邊順手就敲一敲那些API，有時候想回顧一些自己寫的東西，就要先把項(xiàng)目跑起來，這也難免有些麻煩。于是乎，就想著把自己寫的這個小項(xiàng)目打包成桌面端，方面每次打開電腦就能看。經(jīng)過網(wǎng)上查閱，比較成熟的解決方案很多，比如electron，nw.js等等。最終選定用electron，因?yàn)樗男切亲疃?，哈哈?/p>

這個練手Rxjs的小項(xiàng)目是用vue跑的，之前沒玩過vue，順手玩一下。打包桌面端，跟前端框架無關(guān)，只是想夸一下vue在構(gòu)建項(xiàng)目上的體驗(yàn)真的好，簡單方便，會以yes or no的形式讓你完成一個主流的前端框架（回想以前構(gòu)建angular應(yīng)用，還要打開help，看一大堆a(bǔ)pi，在這一點(diǎn)用戶體驗(yàn)上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 來構(gòu)建一個跨平臺應(yīng)用的。Chromium是一個開源瀏覽器，與chrome區(qū)別是不會自動更新，但是一些新特性貌似會在Chromium先上。

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

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

項(xiàng)目跑起來之后，不出意外就出現(xiàn)了electron的桌面端頁面，看了下其中的入口文件main.js

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

這段代碼就是配置桌面端應(yīng)用的入口，于是果斷去把vue的項(xiàng)目打包，直接把前端靜態(tài)資源扔到這里，替換之前的文件。然后繼續(xù)運(yùn)行npm run start，然后白屏（習(xí)慣性的首次失敗。。），不過問題也很快解決了，因?yàn)関ue打包項(xiàng)目，默認(rèn)使用的是絕對路徑，所以到這里就有點(diǎn)小問題。解決方法：

進(jìn)入config文件夾下的index.js將其中的assetsPublicPath修改為相對路徑 ./。

再次運(yùn)行npm run start，成功將vue的項(xiàng)目，顯示為桌面應(yīng)用。

此時還是在electron的starter項(xiàng)目當(dāng)中，這樣顯然太麻煩了，于是下面就將electron引入 vue。

首先在vue項(xiàng)目的package.json中加入electron的依賴，

cnpm install electron --save-dev 
cnpm install electron-packager --save-dev //這個是打成exe文件的插件，之后要用，提前下載好

把electron-quick-start項(xiàng)目中的main.js搬到vue的build文件中，并改個名字electron.js。

因?yàn)槲募南鄬ξ恢眠M(jìn)行了改變，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的，在此之前我們一定要確保項(xiàng)目當(dāng)中已經(jīng)有構(gòu)建好的靜態(tài)資源文件，因此 在運(yùn)行 electron build/electron.js 之前，首先運(yùn)行 npm run build。

經(jīng)過這樣的處理，在命令行中，運(yùn)行 npm run electron_dev之后，就會將之前在electron-quick-start中顯示的桌面應(yīng)用，再次顯示出來。

到這一步，一直非常順利，然而就在一切都理所應(yīng)當(dāng)?shù)臅r候，打包exe文件出現(xiàn)了問題。

以上這些東西自己連調(diào)帶試的搞了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"
  },

關(guān)于electron-packager的配置，簡單介紹一下。
electron-packager --platform= --arch= [optional flags...]

sourcedir 資源路徑，在本例中既是./dist/

appname 打包出的exe名稱

platform 平臺名稱（windows是win32）

arch 版本，本例為x64

后邊的配置項(xiàng)都是選填，可以設(shè)置二進(jìn)制打包等，默認(rèn)是沒有這些的，這里只選填了exe的圖標(biāo)。

npm run electron_build

運(yùn)行打包exe的命令，還是一如既往的順利，項(xiàng)目中成功出現(xiàn)打包好的文件夾，但是去文件夾中啟動exe時，狀況發(fā)生了。

報錯說找不到一個合法的app，什么鬼。。。
谷歌上搜了半天，有說版本不對，重新下載node模塊的，有說路徑不對的。其中我看到報錯指向了asar，可我明明沒有設(shè)置二進(jìn)制打包啊，于是跟這個asar斗爭了很久。

最后發(fā)現(xiàn)跟這個asar屁關(guān)系沒有！

在看到有相關(guān)問題出現(xiàn)的談?wù)撓?，看到解決方案是沒有把package.json放入文件夾，開始還搞不明白為什么還要一個package.json ，后來翻回頭來才發(fā)現(xiàn)自己太想當(dāng)然了，以為dist/下是去拿index.html，其實(shí)人家是要去拿package，然后再去找入口的js，最后才去找index.html.

于是先手動在dist文件夾下增加electron.js和package.json。

package的main指向從build文件夾中復(fù)制來的electron.js（記得把electron.js中index.html的路徑做修改）

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

再次運(yùn)行npm run electron_build得到打包好的文件夾，找到其中的*.exe，雙擊運(yùn)行，終于又出現(xiàn)了熟悉的畫面。

至此，vue打包桌面端就這樣完成了。在此過程中，發(fā)現(xiàn)自己做東西還是有些武斷，太想當(dāng)然了，導(dǎo)致在一些彎路里繞了很久。以后還是要多看文檔，穩(wěn)扎穩(wěn)打！

項(xiàng)目地址：https://github.com/jiwenjiang...