electron 將pc端（vue）頁面打包爲桌面端應用

背景

最近在學習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打包桌面端就這樣完成了。在此過程當中，發現本身作東西仍是有些武斷，太想固然了，致使在一些彎路里繞了好久。之後仍是要多看文檔，穩紮穩打！

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