Vue项目-Nw.js构建桌面应用程序

一、创建vue项目

1、安装vue-cli

npm i -g @vue/cli

#OR

yarn global add @vue/cli

     

2、创建vue项目(vue2)

vue create project_name

3、创建完成后启动项目

cd project_name    //切换目录
    
npm run serve    //启动项目

二、nw.js打包

1、下载离线打包软件

（1）官网地址

        https://nwjs.io/

（2）软件下载

        1）v0.14.7下载地址

                https://dl.nwjs.io/v0.14.7/

       

        2）windows版本

                nwjs-v0.14.7-win-x64.zip        //64位系统

                nwjs-v0.14.7-win-ia32.zip             //32位系统

        注：如果需要支持xp系统，使用v.0.14.7及之前版本

2、配置离线打包

（1）解压缩文件

        离线打包软件下载后，解压压缩包，解压后目录名称如下：

        nwjs-v0.14.7-win-x64         //64位

        nwjs-v0.14.7-win-ia32        //32位

（2）vue项目打包

npm run build        //生成dist目录

（3）测试运行

        1）文件拷贝

                在离线打包软件加压后的目录中（nwjs-v0.14.7-win-x64  OR nwjs-v0.14.7-win-ia32）新建一个createApp目录，将vue打包生成的dist目录中的所有内容拷贝到createApp目录中

        2）新增package.json文件

                在createApp新增package.json文件

                ① package.json文件内容

{

    "name": "softwareName",        //项目名称

    "version": "0.1.0",

    "main": "nwMainWin.js",        //入口文件，可以是网址，也可以是html文件或者js

    "node-remote": "http://localhost:8080",        //远程调试地址

    "nodejs": true,

    "single-instance": true,

    "webkit": {

        "plugin": true

    },

    "build": {

        "files": [

            "dist/**/*"

        ],

        "output": "./releases",

        "nwVersion": "0.14.7",

        "nwPlatforms": [

            "win"

        ],

        "nwArchs": [

            "x86"

        ],

        "win": {

            "productName": "productName",        //产品名称

            "companyName": "companyName",        //公司名称

            "copyright": "copyright",

            "icon": "favicon.ico"

        },

        "overriddenProperties": {

            "main": "http://localhost:8080"

        }

    },

    "private": true,

    "browserslist": [

        "> 1%",

        "last 2 versions",

        "not dead"

    ]

}

        3）运行

                将createApp目录拖动到nw.exe上，测试是否能够正常显示

（4）合并文件

        1）在终端打开打包的目录，并执行命令

                将createApp文件夹中的所有文件打包成createApp.zip（打包后的文件名称可以随意写）

                注：是打包createApp文件夹中的所有文件，不能连同createApp目录一起打包，package.json配置的是文件的相对路径，以main配置的入口文件为起点，一定要理清楚，不然会出错

                ① 执行命令

cmd /c 'copy /b nw.exe + createApp.zip app.exe'

        注：合并完成后会生成app.exe，但是无法单独使用，必须要将整个目录拷贝才可以，nw.exe、createApp.zip、createApp目录可以删除，其他文件必须保留

>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++<

（5）打包成安装包（Enigma Virtual Box打成安装包貌似有点问题，留着做参考）

        1）下载Enigma Virtual Box

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

                注：根据安装向导进行安装即可

        2）Enigma Virtual Box打包

                ① 选择要打包的程序文件（合并生成的exe文件，这里合并后的文件是app.exe）

                ② 添加文件，添加打包文件目录中，除了红色框外的所有文件

                

                ③ 点击Process，等待打包完成

                

                ④ 打包完成可以点击run打开程序

                ⑤ 打包完成后，会生成一个app_setup.exe程序，双击即可打开（程序名称在第一个导出文件位置可以自己随便写）

>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++<

3、配置在线打包

（1）安装插件

npm i nw@0.14.7-sdk        //nwjs

npm i nwjs-builder-phoenix        //nwjs打包软件

（2）package.json新增内容

        1）修改内容

"name": "projectName",

"version": "0.1.0", 

        2）新增内容

                  在package.json原有基础上新增以下内容：

"main": "nwMainWin.js", //入口文件，可以是网址，也可以是html文件或者js文件

"node-remote": "http://localhost:8080", //如果要获取nw对象打开新窗口，必须启用此项

"nodejs": true,

"single-instance": true,

"webkit": {

    "plugin": true

},

"private": true,

"build": {        //打包配置

    "files": [

        "dist/**/*"     //打包文件路径 

    ],

    "output": "./releases",    //打包输出路径

    "nwVersion": "0.14.7",    //nw版本

    "nwPlatforms": [

        "win"    //系统类型

    ],

    "nwArchs": [

        "x86"    //系统架构

    ],

    "win": {

        "productName": "display_setup",    //应用名称

        "companyName": "companyName",    //公司名称

        "copyright": "copyright",    //版权信息

        "icon": "public/favicon.ico"    //应用icon

    },

    "overriddenProperties": {

        "main": "http://localhost:8080/"

    }

},

        3）package.json文件script中新增启动命令和打包命令

"nw:serve": "nw",  //nw调试命令

"nw:build": "npm run build && build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ." //nw打包命令

        4）nw启动

               

npm run nw:serve

        5）nw打包

npm run nw:build

//注：打包完成后，打开package.json中output配置的目录，点击exe即可运行