客户端封装浏览器

　　公司技术栈是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