使用nw.js打包vue项目为exe可执行文件

使用nw.js打包vue项目为exe可执行文件

1. 下载nw.js,下载地址https://nwjs.org.cn/

   • nw.js分为两个版本，一个为sdk版本，一个为normal版本，使用sdk版本打包可以按F12进入开发者模式，而normal版本不行
   image.png

2. 解压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项目打包的时候，一定要把开发环境下的代理去了，不然会导致无法访问后台

• package.json文件中的main和name属性为必要字段

  
  
  image.png

• package.json文件中的"max_width" ，"max_height"设置之后会导致窗口缩小放大出现问题，删除这两个属性就可以正常缩放放大

• icon属性的文件格式为png可以正常显示，ico格式不行

• fullscreen属性设置为true的话，就无法通过esc退出，缩小等也会失效

3. 做完以上步骤后就可以将新建的test文件夹拖到nw.exe上，如果不出问题的话，会出现一个预览窗口，这就是打包之后的样子

4. 打包

   • 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打包。

5. 使用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

保存，然后等待打包完成，在刚选择的生成目录下就可以找到打包好的安装文件。