0.背景

最近做一個基於 VUE 2 的資產後臺管理系統。因為暫時沒有後臺人員編寫資料介面，只把前端頁面構建出來了。
突然有一天，領導說有客戶來訪，需要看一看後臺管理系統的介面演示。而當前做的web專案只有純靜態，也木有上線，所以給客戶演示時非常不方便，於是領導喊我將其打包成一個桌面應用程式，直接可以離線觀看的那種。
當時聽著也是一愣，這玩意不是應該是c++或java這種更牛逼的東西乾的事情嗎？
好吧，領導說整，那就整看看唄。

1.VUE 2.x 介紹

vue就先不多說了，此段純屬湊字數。

2.electron 介紹

簡單百度一下，前端開發桌面程式，彈出了2個東西，NW.js

和 Electron。
哇，真是牛逼，但是都不會。要開始選擇用哪個啦。
對比了一下兩個工具的github星星，那就選擇Electron吧。
electron是基於Chromium 和 Node.js 來構建一個跨平臺應用的。Chromium是一個開源瀏覽器，與Chrome區別是不會自動更新，但是一些新特性會在Chromium先上。既然自帶瀏覽器核心，這麼的跨平臺，終於不用考慮相容性啦，對於一個前端er來說，真的是太開心了呀！

3.electron 安裝

a.

npm安裝

git clone https://github.com/electron/electron-quick-start
 

cd electron-quick-start
cnpm install 
npm start

此時你就可以看到官方demo了吧。

b.

再看看專案中的入口檔案main.js
以下是createWindow函式中的部分：

 // 此處設定視窗大小
  mainWindow = new BrowserWindow({width: 1200, height: 1000})

  // 此處設定入口頁面
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:'
 
,
    slashes: true
  }))

c.

接下來打包VUE，將打包後的檔案放到這邊來。
回到vue專案中。
打包前記得將config中的index.js進行修改，以免打包出來的js和css檔案路徑不對。將打包檔案的絕對路徑改為相對路徑。

再來改圖片路徑，這個問題把我坑慘了。
由於：ExtractTextPlugin抽離css檔案時沒有轉換資源引入路徑，導致app.css引入了相對app.css目錄為”static/img/ .png”的靜態資源，該路徑相對index.html即為：static/css/static/img/ .png。
導致：圖片引入路徑多了”/static/css”兩層目錄。
解決：將build資料夾下的utils.js中的ExtractTextPlugin的publicPath修改一下，如下：

至此，再執行

npm run build

得到dist資料夾，將裡面的東西考到剛剛的electron專案中。
再次

npm start

不出意外的話，即得到了專案視窗啦。

4.VUE 專案中安裝electron

然後開始在vue專案中進行打包

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

把electron-quick-start專案中的main.js搬到vue的build檔案中，並改個名字electron.js。
此時入口檔案應該是打包後的dist資料夾中的index.html，所以這裡需要更改入口頁面的路徑

  // 此處設定入口頁面
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '../dist/index.html'),// 更改了這
    protocol: 'file:',
    slashes: true
  }))

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

 "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "electron_dev": "npm run build && electron build/electron.js",// 這一句是增加的
    },

再：

npm run electron_dev

就會得到跟開始一樣的效果：

5.將專案打包成exe檔案

到最後一步了，將專案打包成exe檔案
首先，為之前下載好的electron-packager，增加一條啟動命令：

  "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "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 <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]

1. sourcedir 資源路徑，在本例中既是./dist/
2. appname 打包出的exe名稱
3. platform 平臺名稱（windows是win32）
4. arch 版本，本例為x64

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

然後，在打包後的dist資料夾下增加electron.js和package.json。
這個electron.js與剛剛build資料夾下的electron.js一樣，不過入口頁面路徑應該改為相對於當前檔案的路徑。即：

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

這個package.json與最開始electron-quick-start專案中的package.json檔案一致，不過裡面的main應該指向從build資料夾中的electron.js。即：

{
  "name": "RFID",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",// 注意此處
  "scripts": {
    "start": "electron ."
  },
}

然後開始打包

npm run electron_build

會得到一個資料夾，這個就是你的打包檔案。雙擊其中的*.exe檔案，就可以開啟你的桌面應用啦。

6.友情連結