使用nw.js打包vue項目為exe可執(zhí)行文件
-
下載nw.js,下載地址https://nwjs.org.cn/
- nw.js分為兩個版本，一個為sdk版本联四，一個為normal版本伯顶，使用sdk版本打包可以按F12進入開發(fā)者模式较锡，而normal版本不行
image.png
-
解壓nw.js文件
-
解壓后如圖：
image.png
-
- 在nw.js文件夾中建一個和pnacl平級的test文件夾
- 將vue項目打包荠察，生成dist文件罩引，將dist里static文件夾和index.html復(fù)制到上步新建的test文件夾耗式，再新建一個package.json文件,package.json文件轉(zhuǎn)載于https://www.cnblogs.com/jinling/p/6165277.html昔馋，具體查閱官方文檔，https://nwjs.org.cn/doc/api/Manifest-Format.html
image.png
{
/**指定程序的起始頁面猛频。*/
"main": "index.html",
/**字符串必須是小寫字母或者數(shù)字狮崩，可以包含.或者_(dá)或者-不允許帶空格蛛勉。name必須全局唯一。*/
"name": "demo",
/**程序描述*/
"description": "demo app of node-webkit",
/**程序版本號*/
"version": "0.1.0",
/**關(guān)鍵字*/
"keywords": ["demo","node-webkit"],
/**bool值睦柴，如果設(shè)置為false诽凌，將禁用webkit的node支持。*/
"nodejs": true,
/**
* 指定一個node.js文件坦敌，當(dāng)程序啟動時侣诵，該文件會被運行，啟動時間要早于node-webkit加載html的時間狱窘。
* 它在node上下文中運行杜顺，可以用它來實現(xiàn)類似后臺線程的功能。
* （不需要可注釋不用）
*/
//"node-main": "js/node.js",
/**
* bool值训柴。默認(rèn)情況下哑舒，如果將node-webkit程序打包發(fā)布，那么只能啟動一個該應(yīng)用的實例幻馁。
* 如果你希望允許同時啟動多個實例，將該值設(shè)置為false越锈。
*/
"single-instance": true,
/**窗口屬性設(shè)置 */
"window": {
/**字符串仗嗦，設(shè)置默認(rèn)title。*/
"title": "demo",
/**窗口的icon甘凭。*/
"icon": "link.png",
/**bool值稀拐。是否顯示導(dǎo)航欄。*/
"toolbar": false,
/**bool值丹弱。是否允許調(diào)整窗口大小德撬。*/
"resizable": true,
/**是否全屏*/
"fullscreen": false,
/**是否在win任務(wù)欄顯示圖標(biāo)*/
"show_in_taskbar": true,
/**bool值。如果設(shè)置為false躲胳，程序?qū)o邊框顯示蜓洪。*/
"frame": true,
/**字符串。窗口打開時的位置坯苹，可以設(shè)置為“null”隆檀、“center”或者“mouse”。*/
"position": "center",
/**主窗口的的寬度粹湃。*/
"width": 800,
/**主窗口的的高度恐仑。*/
"height": 670,
/**窗口的最小寬度。*/
"min_width": 400,
/**窗口的最小高度为鳄。*/
"min_height": 335,
/**窗口顯示的最大寬度裳仆，可不設(shè)。*/
"max_width": 800,
/**窗口顯示的最大高度孤钦，可不設(shè)歧斟。*/
"max_height": 670,
/**bool值记某，如果設(shè)置為false，啟動時窗口不可見构捡。*/
"show": true,
/**是否在任務(wù)欄顯示圖標(biāo)液南。*/
"show_in_taskbar":true,
/**
* bool值。是否使用kiosk模式勾徽。如果使用kiosk模式滑凉，
* 應(yīng)用程序?qū)⑷溜@示，并且阻止用戶離開應(yīng)用喘帚。
* */
"kiosk": false
},
/**webkit設(shè)置*/
"webkit": {
/**bool值畅姊，是否加載插件，如flash吹由，默認(rèn)值為false若未。*/
"plugin": true,
/**bool值，是否加載Java applets倾鲫，默認(rèn)為false粗合。*/
"java": false,
/**bool值，是否啟用頁面緩存乌昔，默認(rèn)為false隙疚。*/
"page-cache": false
}
}
碰見幾個需要注意的地方：
vue項目打包的時候，一定要把開發(fā)環(huán)境下的代理去了磕道，不然會導(dǎo)致無法訪問后臺 </font>
-
package.json文件中的main和name屬性為必要字段
image.png package.json文件中的"max_width" 供屉，"max_height"設(shè)置之后會導(dǎo)致窗口縮小放大出現(xiàn)問題，刪除這兩個屬性就可以正衬缃叮縮放放大
icon屬性的文件格式為png可以正常顯示伶丐，ico格式不行
fullscreen屬性設(shè)置為true的話，就無法通過esc退出疯特，縮小等也會失效
做完以上步驟后就可以將新建的test文件夾拖到nw.exe上哗魂，如果不出問題的話，會出現(xiàn)一個預(yù)覽窗口辙芍，這就是打包之后的樣子
-
打包
1-3步都沒有出問題的話啡彬，接下來將新建的test中的所有問件壓縮為test.zip
將test.zip修改為test.nw，并放到和test文件夾同級的目錄
在nw.js的文件夾打開dos窗口故硅，輸入copy /b nw.exe+test.nw test.exe庶灿，test.exe的test可以更改為自己想要的名字
image.png
image.png
接下來會出現(xiàn)一個test.exe文件，雙擊就會出現(xiàn)應(yīng)用窗口吃衅，但是這時的test.exe只能當(dāng)前文件夾下運行往踢，此時相當(dāng)于是一個免安裝的綠色軟件，如果想要弄成和qq這種一步步安裝的文件的話徘层，還得借助打包工具Inno Setup Compiler打包峻呕。
-
使用Inno Setup Compiler進行打包
-
下載Inno Setup Compiler并安裝利职，打開
image.png
image.png -
?然后一路next,
?
繼續(xù)next
隨便取個名字
保存，然后等待打包完成瘦癌，在剛選擇的生成目錄下就可以找到打包好的安裝文件猪贪。
