將Vue項(xiàng)目打包為Windows應(yīng)用（.exe）

新增：解決國(guó)內(nèi)用戶下載electron速度太慢的問(wèn)題

調(diào)整：由于electron版本升級(jí)，刪除原文中對(duì)electron版本限制在2.0的命令行語(yǔ)句

背景

朋友是做商品零售褐荷，每月都需要將銷售數(shù)據(jù)匯總至年度銷售表格中挣跋，在這個(gè)過(guò)程中存在很多重復(fù)性的工作，無(wú)奈中。在一次聊天中，我了解到他的需求，就用Vue做了一個(gè)頁(yè)面教藻，可以實(shí)現(xiàn) Excel 轉(zhuǎn)成 JSON 進(jìn)行操作，最后再將 JSON 轉(zhuǎn)成 Excel 右锨，雖然后來(lái)了解到用 Python應(yīng)該會(huì)更高效括堤，待日后來(lái)研究！

不過(guò)咱好歹有個(gè)圖形界面绍移，用戶體驗(yàn)好Ｇ那浴（自我安慰一波~）

接下來(lái)問(wèn)題便來(lái)了，朋友完全不懂編程蹂窖，每次都準(zhǔn)備開發(fā)環(huán)境也挺麻煩广匙，便想著能不能做成可執(zhí)行文件.exe，直接雙擊安裝恼策，生成快捷方式鸦致，直接就能用，人性化點(diǎn)贊涣楷！

1. Vue項(xiàng)目打包為桌面應(yīng)用

在網(wǎng)上看了下分唾，常用的解決方案有Electron和 nw.js 等，廣大群眾都采用的 Electron 狮斗，鄙人就跟個(gè)風(fēng)吧~

在學(xué)習(xí)的過(guò)程中绽乔，發(fā)現(xiàn)關(guān)于Electron，常見的有兩種打包方法：

第一種：將自己的vue項(xiàng)目打包碳褒，放到官方的 demo 文件中折砸，改變打包路徑

第二種：在自己的vue的項(xiàng)目中引入插件看疗，然后打包

經(jīng)過(guò)一番嘗試，我決定采用第一種睦授，原因是：特两芳！別！簡(jiǎn)去枷！單怖辆！

下面詳細(xì)介紹下第一種方法：

第一步：把electron的官方例子扒下來(lái)，下面簡(jiǎn)稱A删顶，留著待用：

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

第二步：進(jìn)入我們自己的項(xiàng)目（下面簡(jiǎn)稱B）竖螃，修改公共路徑為相對(duì)路徑（很多同學(xué)都是這步出了問(wèn)題，導(dǎo)致 npm run build 后出現(xiàn)白屏情況）：

如果你是vue-cli3構(gòu)建的項(xiàng)目：

執(zhí)行下列指令逗余，打開vue-cli圖形配置界面特咆，選擇配置，修改公共路徑為 ./ , 保存即可：

vue ui

或者你可以點(diǎn)擊上圖中右上角的打開vue配置录粱， 或者在項(xiàng)目的根目錄中創(chuàng)建 vue.config.js坚弱， 設(shè)置以下內(nèi)容：

module.exports = { ??

lintOnSave: undefined, ??

publicPath: './', ??

outputDir: undefined, ??

assetsDir: undefined, ??

runtimeCompiler: undefined, ??

productionSourceMap: undefined, ??

parallel: undefined, ??

css: undefined

}

如果你是vue-cli2或者 webpack 創(chuàng)建的項(xiàng)

進(jìn)入config文件夾下的 index.js ，將其中的 assetsPublicPath 修改為相對(duì)路徑 ./ 关摇，保存即可：

第三步：打包你的項(xiàng)目，我相信這步你已經(jīng)輕車熟路了~碾阁，將打包出來(lái)的 dist 文件夾復(fù)制到之前下載的A文件夾中

npm run build

第四步：進(jìn)入剛才下載的A項(xiàng)目输虱，刪除項(xiàng)目根目錄下的 index.html 文件。

第五步：在A項(xiàng)目中找到入口文件 main.js 脂凶，修改打包的文件路徑為我們的index.html：

// main.js原始內(nèi)容

mainWindow.loadFile('index.html')

//修改后的內(nèi)容

mainWindow.loadFile('./dist/index.html')

第六步：在A項(xiàng)目中檢查 package.json 的命令宪睹，正常情況下，運(yùn)行下列指令即可進(jìn)行打包效果預(yù)覽：

//國(guó)內(nèi)網(wǎng)絡(luò)下載electron可能很慢蚕钦，建議設(shè)置

// npm config set registry https://registry.npm.taobao.org/

// npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

npm install

npm run start

打包成功以后就會(huì)出來(lái)一個(gè)桌面應(yīng)用亭病，如果一切正常的話你已經(jīng)可以看到自己的項(xiàng)目了，如果出現(xiàn)白屏的情況嘶居，請(qǐng)返回查看第二步~

第七步：在A項(xiàng)目中罪帖，下載打包需要的依賴 electron-packager

npm install electron-packager --save-dev

第八步：在A項(xiàng)目中，進(jìn)入 package.json 邮屁，在 scripts 中添加 packager 指令整袁，如下所示：

"scripts": {

"start": "electron .",

"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"http://此處為添加命令

}

如果你想修改最后打包出來(lái)的exe文件圖標(biāo)，類似于favicon佑吝，或者EXE的名字坐昙，可以設(shè)置 packager 的指令內(nèi)容為，icon的路徑自己調(diào)整下哦芋忿，更多配置內(nèi)容請(qǐng)查閱文檔哈：

"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"

第九步：運(yùn)行命令打包炸客，然后項(xiàng)目中會(huì)出現(xiàn)一個(gè)App-win32-x64的文件夾疾棵，這個(gè)文件就是打包好的桌面應(yīng)用，文件夾里有一個(gè) App.exe 文件痹仙，App.exe就是這個(gè)項(xiàng)目的啟動(dòng)文件：

npm run packager

大功告成是尔！什么？為什么打包好的不是一個(gè)EXE文件蝶溶，而是一個(gè)文件夾嗜历？

我只能說(shuō)太天真！下面我們繼續(xù)封裝EXE安裝包

將桌面應(yīng)用文件夾封裝成EXE安裝包

有很多方法可以達(dá)到我們的目的抖所，我在這里選擇Inno Setup作為封裝工具梨州，整個(gè)過(guò)程也非常開心愉快~

下面這篇文章寫的比較全面，是我想要的內(nèi)容田轧，哈哈暴匠，親測(cè)有效~

開源Inno Setup官網(wǎng)下載、安裝傻粘、打包教程（官網(wǎng)安裝向?qū)е形恼Z(yǔ)言包）www.cnblogs.com