客戶端封裝瀏覽器

　　公司技術棧是vue，有一個項目是會員系統，現在客戶不想在瀏覽器輸入網址再登錄，而是想有一個客戶端，能下載到自己本地，那樣才覺得是自己的東西，所以公司讓把這個網頁系統封裝到客戶端，在查看了許多資料后，終於實踐成功，現在記錄一下，以免得以后忘記操作步驟。

1、下載和安裝node-webkit　

　　官網訪問地址 https://nwj.io/

　　我這里下載了兩個包：

　　

 　　開發時用sdk，打開的客戶端頁面可以F12查看頁面信息；上線時用下面那個。

　　 安裝好后的文件夾：

 　　

2、應用文件

 　　vue項目打包，npm run build，生成一個static文件夾和一個index.html，index.html就是入口頁面：

　　

 

　　現在需要創建一個配置文件package.json:

{
  "main": "index.html",  // 這個就是入口文件
  "name": "測試",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "private": true,
  "keywords": ["abc", "abc"],
  "window": {
    "title": "測試",
    "icon": "img.png",
    "toolbar": true,
    "frame": true,
    "width": 1300,
    "height": 768,
    "position": "center",
    "min_width": 1200,
    "min_height": 600
  },
  "webkit": {
    "plugin": true
  },
  "chromium-args": "--incognito"
}

　　關鍵package.json的語法請參考： https://github.com/nwjs/nw.js/wiki/Manifest-format#webkit-subfields

3、生成exe

　　將打包后的static、index.html和package.json文件一起壓縮到一個zip壓縮包里，命名為app.zip

　　　　

　　將這個app.zip的擴展名改為nw，變為app.nw；

　　將app.nw與package.json拷貝到node-webkit的和nw.exe同一目錄，，進入windows cmd后運行這個命令

copy /b nw.exe+app.nw app.exe

　　

 

　　將新生成的兩個文件（app.exe與app.nw）剪切到新的文件夾（app文件夾），為下面的封包做准備：

4、修改應用程序(exe)的圖標

　　默認情況下創建出來的應用程序（exe）會和nw.exe的圖標一樣，如果想要特定的圖標，可以通過resource hacker這個工具來修改nw.exe的圖標，換成你想要的：

　　網址：http://www.angusj.com/resourcehacker/

5、封包

　　官網推薦用Enigma Virtual Box這個軟件來封包，所以我先嘗試了這個方法，但是我最終沒有用這個軟件，原因兩點：1、生成可執行的exe應用程序體積較大；2、不是像普通的應用程序那個下載安裝下一步下一步的那種，在我看來不符合大眾的心理需求。這個方法打包出來的應用程序比較方便，直接將打包好的exe文件發給用戶，用戶雙擊就能直接運行，在這里我也不細說了，文章末尾有鏈接，可以去看看。

　　下載地址：https://enigmaprotector.com/en/downloads.html

　　另一個打包方式就是用Inno Setup來打包，即將所需要的web應用源文件和node-webkit

　　下載地址：http://www.jrsoftware.org/isdl.php

 　　　　

 

 

 　　雙擊打開，選擇新建：

　　

 

 

 　　

 

 

 　　填寫應用發布的信息：

　　

 

　　添加應用程序的打包文件：

　　

 

 

 　　選擇輸出的文件夾、編譯完成后的exe文件名，還可以選擇自定義的圖標，這個圖標應該是.ico格式：

　　

 

 

 　　生成可執行的腳本文件：

　　

 

 

 　　執行腳本，點擊運行程序：

　

 

 

 　　選擇安裝目錄：

　　

 

 

 　　創建桌面快捷方式：

　　

 

 

 　　創建完成：

　　

 

 

 

　　點擊Finish，就會自動打開客戶端頁面。

　　安裝地址：

　　

 

 　　全文到這里結束，但是里面還有很多需要注意的小細節，以后有空再整理。

 　　最后，感謝文章：

　　https://blog.csdn.net/miaodichiyou/article/details/81668431?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158798817719726869031867%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=158798817719726869031867&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v25-3

 　　https://jb51.net/softjc/460940.html

　　http://keenwon.com/1311.html