近期準(zhǔn)備更新兩篇文章，一直沒(méi)有時(shí)間來(lái)寫(xiě)。一篇是想說(shuō)說(shuō)如何使用Electron將Vue項(xiàng)目打包成桌面應(yīng)用。另一篇是關(guān)于Vue框架input組件的個(gè)性使用，包括鍵盤(pán)的監(jiān)聽(tīng)，脫離鼠標(biāo)操作等等，這個(gè)暫時(shí)擱置，看看周末有沒(méi)有時(shí)間寫(xiě)寫(xiě)吧。

今天主要說(shuō)一下如何將使用vue-cli腳手架快速搭建的項(xiàng)目，打包成PC端的桌面應(yīng)用。這里我使用的工具是electron官方文檔

順便了解一下Electron。Electron 可以讓你使用純 JavaScript 調(diào)用豐富的原生(操作系統(tǒng)) APIs 來(lái)創(chuàng)造桌面應(yīng)用。 你可以把它看作一個(gè)專(zhuān)注于桌面應(yīng)用的 Node. js 的變體，而不是 Web 服務(wù)器。這不意味著 Electron 是某個(gè)圖形用戶(hù)界面（GUI）庫(kù)的 JavaScript 版本。 相反，Electron 使用 web 頁(yè)面作為它的 GUI，所以你能把它看作成一個(gè)被 JavaScript 控制的，精簡(jiǎn)版的 Chromium 瀏覽器。??????

開(kāi)始之前，可以先了解一下官方文檔里打造第一個(gè)Electron應(yīng)用 --- electron-quick-start 這是一個(gè)最基本的Electron應(yīng)用demo。從GitHub下載下來(lái)看看electron-quick-start

假設(shè)已經(jīng)使用vue-cli快速構(gòu)建了一個(gè)項(xiàng)目，如果還沒(méi)有的話可以看看基于vue-cli快速構(gòu)建，這篇簡(jiǎn)書(shū)描述得很細(xì)致。

1.打開(kāi)終端進(jìn)入Vue項(xiàng)目的目錄

$npm run build? 運(yùn)行后項(xiàng)目?jī)?nèi)會(huì)出現(xiàn)dist文件夾

2.更改路徑

1.jpg

在項(xiàng)目config - index.js - build: - assetsPublicPath? 修改為相對(duì)路徑 ./

3.Vue 中引入Electron,首先在vue項(xiàng)目的package.json中加入Electron的依賴(lài)，

$npm install electron --save-dev //添加依賴(lài)

$npm install electron-packager --save-dev //這個(gè)是打成exe文件的插件

4.把electron-quick-start項(xiàng)目中的main.js復(fù)制到新建vue的build文件中，并改個(gè)名字electron.js。路徑修改為下面的截圖一樣：./dist/index.html

2.jpg

5.同時(shí)復(fù)制一份electron.js 到dist文件夾下。注意這時(shí)的路徑就不是./dist/index.html，直接改成index.html即可

6.在package.json文件中增加一條指令"electron_dev": "npm run build && electron build/electron.js"，用來(lái)啟動(dòng)electron，如圖：

3.jpg

7.復(fù)制一份package.json文件到dist文件夾下。

8.修改dist/package.json main入口為："main": "electron.js",

先說(shuō)明一下，electron_dev?就是用來(lái)啟動(dòng)electron的，在此之前我們一定要確保項(xiàng)目當(dāng)中已經(jīng)有構(gòu)建好的靜態(tài)資源文件，因此 在運(yùn)行?electron build/electron.js?之前，首先運(yùn)行?npm run build。

經(jīng)過(guò)這樣的處理，在命令行中，運(yùn)行?npm run electron_dev之后，就會(huì)將自己的Vue項(xiàng)目顯示成桌面應(yīng)用。

至此，這還沒(méi)算打包，下面接著說(shuō)如何打包成應(yīng)用程序。這里都是手動(dòng)配置electron打包，實(shí)際上使用vue-electron腳手架更便捷，有時(shí)間再來(lái)說(shuō)。

9.在package.json文件為之前下載好的electron-packager，再手動(dòng)增加一條啟動(dòng)命令"electron_build": "electron-packager ./dist/ --arch=x64 --overwrite"。注意：dist文件內(nèi)的package.json也要加上這條指令。

4.jpg

其實(shí)這條指令有很多參數(shù)的，包括打包的平臺(tái)，應(yīng)用圖標(biāo)等等，我只是省略了都沒(méi)寫(xiě)，使用默認(rèn)。

10.$npm run electron_build? 執(zhí)行后即可在項(xiàng)目文件夾內(nèi)看到打包好的桌面應(yīng)用。

最后需要提一下，我使用的是Mac 所以打包出來(lái)的應(yīng)用是供Mac運(yùn)行，如果想要運(yùn)行在Windows上的話，如果不怕費(fèi)事可以重新按照步驟重來(lái)一遍。當(dāng)然也可以把壓縮包傳到Windows電腦上，如果傳壓縮包切記要重新安裝依賴(lài)，即把node_modules文件刪除，然后cmd 命令 輸入 npm install? 重新生成node_modules依賴(lài)。最后再輸入命令npm run?electron_build打包即可出現(xiàn).exe可運(yùn)行程序。

有機(jī)會(huì)再說(shuō)說(shuō)vue-electron。