使用nw.js打包vue项目为exe可执行文件
-
下载nw.js,下载地址https://nwjs.org.cn/
- nw.js分为两个版本，一个为sdk版本，一个为normal版本，使用sdk版本打包可以按F12进入开发者模式，而normal版本不行
image.png
-
解压nw.js文件
-
解压后如图：
image.png
-
- 在nw.js文件夹中建一个和pnacl平级的test文件夹
image.png
- 将vue项目打包，生成dist文件，将dist里static文件夹和index.html复制到上步新建的test文件夹，再新建一个package.json文件,package.json文件转载于https://www.cnblogs.com/jinling/p/6165277.html，具体查阅官方文档，https://nwjs.org.cn/doc/api/Manifest-Format.html
image.png
{
/**指定程序的起始页面。*/
"main": "index.html",
/**字符串必须是小写字母或者数字，可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
"name": "demo",
/**程序描述*/
"description": "demo app of node-webkit",
/**程序版本号*/
"version": "0.1.0",
/**关键字*/
"keywords": ["demo","node-webkit"],
/**bool值，如果设置为false，将禁用webkit的node支持。*/
"nodejs": true,
/**
* 指定一个node.js文件，当程序启动时，该文件会被运行，启动时间要早于node-webkit加载html的时间。
* 它在node上下文中运行，可以用它来实现类似后台线程的功能。
* （不需要可注释不用）
*/
//"node-main": "js/node.js",
/**
* bool值。默认情况下，如果将node-webkit程序打包发布，那么只能启动一个该应用的实例。
* 如果你希望允许同时启动多个实例，将该值设置为false。
*/
"single-instance": true,
/**窗口属性设置 */
"window": {
/**字符串，设置默认title。*/
"title": "demo",
/**窗口的icon。*/
"icon": "link.png",
/**bool值。是否显示导航栏。*/
"toolbar": false,
/**bool值。是否允许调整窗口大小。*/
"resizable": true,
/**是否全屏*/
"fullscreen": false,
/**是否在win任务栏显示图标*/
"show_in_taskbar": true,
/**bool值。如果设置为false，程序将无边框显示。*/
"frame": true,
/**字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。*/
"position": "center",
/**主窗口的的宽度。*/
"width": 800,
/**主窗口的的高度。*/
"height": 670,
/**窗口的最小宽度。*/
"min_width": 400,
/**窗口的最小高度。*/
"min_height": 335,
/**窗口显示的最大宽度，可不设。*/
"max_width": 800,
/**窗口显示的最大高度，可不设。*/
"max_height": 670,
/**bool值，如果设置为false，启动时窗口不可见。*/
"show": true,
/**是否在任务栏显示图标。*/
"show_in_taskbar":true,
/**
* bool值。是否使用kiosk模式。如果使用kiosk模式，
* 应用程序将全屏显示，并且阻止用户离开应用。
* */
"kiosk": false
},
/**webkit设置*/
"webkit": {
/**bool值，是否加载插件，如flash，默认值为false。*/
"plugin": true,
/**bool值，是否加载Java applets，默认为false。*/
"java": false,
/**bool值，是否启用页面缓存，默认为false。*/
"page-cache": false
}
}
碰见几个需要注意的地方：
vue项目打包的时候，一定要把开发环境下的代理去了，不然会导致无法访问后台 </font>
-
package.json文件中的main和name属性为必要字段
image.png package.json文件中的"max_width" ，"max_height"设置之后会导致窗口缩小放大出现问题，删除这两个属性就可以正常缩放放大
icon属性的文件格式为png可以正常显示，ico格式不行
fullscreen属性设置为true的话，就无法通过esc退出，缩小等也会失效
做完以上步骤后就可以将新建的test文件夹拖到nw.exe上，如果不出问题的话，会出现一个预览窗口，这就是打包之后的样子
-
打包
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
接下来会出现一个test.exe文件，双击就会出现应用窗口，但是这时的test.exe只能当前文件夹下运行，此时相当于是一个免安装的绿色软件，如果想要弄成和qq这种一步步安装的文件的话，还得借助打包工具Inno Setup Compiler打包。
-
使用Inno Setup Compiler进行打包
-
下载Inno Setup Compiler并安装，打开
image.png
image.png -
image.png
image.png
image.png
然后一路next,
image.png
image.png
继续next
image.png
image.png
随便取个名字
image.png
保存，然后等待打包完成，在刚选择的生成目录下就可以找到打包好的安装文件。
