惊！使用nw.js将vue项目打包为可在xp系统运行的桌面程序

前言

目前js打包桌面程序最流行的是electron，但是这个入门交简单文章也多，暂不赘述，electron官网地址：https://nklayman.github.io/vue-cli-plugin-electron-builder/

之所以研究nw.js是为了在使用vue的同时也能满足xp用户对项目的使用，之前我在nw.js入门+桌面应用程序——最易懂的教程中，也简单介绍了nw.js把项目打包成桌面应用的使用，这次针对xp又进行了深入研究。

主要内容

1.将vue项目打包为桌面可执行程序
2.在vuecli创建的项目基础上增加nw插件无缝转化为桌面程序
3.可在xp系统运行
4.支持自动更新

将vue项目打包为桌面可执行程序

1.将vue项目打包生成的dist目录下的所有文件复制到app及package.nw目录下

注意：nw.js 支持到xp的最后版本是0.14.7版本。下载传送门：https://dl.nwjs.io/v0.14.7/

有两种方式 1.将dist文件夹放在app及package.nw目录下，然后修改package.json中的main路径，但是容易报错；2.将dist目录去掉把index.html和其他文件直接放在app及package.nw目录下可以正常启动成功。可以两种都试试

2.将app目录拖动至nw.exe上方运行

3.执行打包命令生成桌面软件

copy /b nw.exe+package.nw yourname.exe

重点来啦！在vuecli创建的项目基础上增加nw插件用命令运行程序

运行vue项目为桌面程序

1.创建vue项目 （我这里用的脚手架3）

vue create yourname  // vuecli3+
   
or
   
vue init webpack yourname // vuecli2
   

2.添加nw插件依赖

cnpm install nw@0.14.7-sdk --save-dev  
// 官方文档说要支持xp系统请使用0.14.7版本，不考虑xp则可安装最新版

注意：推荐使用cnpm安装，npm安装基本失败，yarn安装也难得的不稳定！因此推荐cnpm安装

3.运行项目 先运行vue项目，如果出现依赖错误，删除node_modules目录然后重新cnpm install即可

4.以桌面软件的方式运行项目

在package.json中增加一行nwjs的文件入口代码	

"main": "http://localhost:8080/", // 因为nw入口可以是.html,.js和线上地址。因为是本地运行，
将main设置为你上一步中运行起来的项目地址

在package.json中scripts下增加一行脚本命令

"dev:nw": "nw",

然后在编辑器终端输入 npm run dev:nw 即可启动桌面版vue项目

打包vue项目为桌面程序

1.使用插件打包：nw中文网推荐nwjs-builder-phoenix（按官方推荐来吧，坑少）

cnpm install nwjs-builder-phoenix --save-dev

在package.json中scripts下增加两行脚本命令

"build:nw": "npm run build && build --tasks win-x86 --mirror https://npm.taobao/mirrors/nwjs/ .", // win-x86版
"build:nw:all": "npm run build && build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://npm.taobao/mirrors/nwjs/ .", // 打包多版本

2.在package.json中配置基本打包参数

"build": {
	"files": [
  		"dist/**/*"  // 文件路径，你vue打包后的文件夹
	],
	"output": "./releases", // 输出路径，打包后的软件输出位置
	"nwVersion": "0.14.7", // 跟你下载的nw版本匹配
	"nwPlatforms": [
  		"win" // 平台
	],
	"nwArchs": [
  		"x86" // 和上面打包命令后面的版本参数匹配
	],
	"overriddenProperties": {
 	    "main": "./dist/index.html" // 设置软件入口文件，其实这里可以是一个网址
	},
    "targets": [
  		"zip" // 打包成zip格式，自动更新用的到
	]
},

3.修改vue.config.js，将打包路径设置为相对路径,cli2版本不再赘述

module.exports = {
	publicPath: '/',
	productionSourceMap: false,
}

4.完成这三步之后，在终端运行

npm run build:nw

生成打包后的桌面软件文件夹。找到里面的your name.exe然后双击运行即可。

如果无需支持xp，将--tasks win-x86改成--tasks win-x64，nwArchs内的x86改成x64即可

一句话搞定自动更新

常见问题（踩坑）

1.vuecli3+默认的路由模式为history，使用nw打包后会报错，将router.js中的mode: history注释即可。

自动更新原理：

如果将build/overriddenProperties/mian的值设置为服务器上的外网地址，这样每次更新只需要更新服务器上的包，用户这边一次安装后就无需更新。

完整配置、打包后目录及效果

nw配置主要在package.json，完整配置如下

美化安装程序

如果每次都发压缩包，解压，安装就显得很low ,
前面我们用nw-builder 做了 NW 的打包后，仅仅打安装包就比较简单了。

主要思路：用 Node.js 操作 iss 文件，再借助官方推荐的 innosetup 进行打包。

1、安装相关依赖

cnpm install iconv-lite innosetup-compiler --save-dev

2、创建 ./config/setup.iss 打包配置文件

注意： 最好另存为 ansi 格式存 utf8 存这个文件打出来的包都是乱码。

OutputDir={#OutputPath}
OutputBaseFilename={#OutputFileName}
SetupIconFile={#SetupIconFilePath}
Compression=lzma
SolidCompression=yes
PrivilegesRequired=admin
Uninstallable=yes
UninstallDisplayName={#MyAppAliasName}
DefaultGroupName={#MyAppAliasName}

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: checkedonce

[Files]
Source: {#SourceMain}; DestDir: "{app}"; Flags: ignoreversion
Source: {#SourceFolder}; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs

[Messages]
SetupAppTitle={#MyAppAliasName} setup wizard
SetupWindowTitle={#MyAppAliasName} setup wizard

[Icons]
Name: "{commondesktop}\{#MyAppAliasName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
Name: "{group}\{#MyAppAliasName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{group}\uninstall {#MyAppAliasName}"; Filename: "{uninstallexe}"

[Run]
Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent

3.、新增 ./build/setup.js

这个文件就是用来打包 windows 下安装包的
代码如下

const { run } = require('runjs')
const chalk = require('chalk')
const config = require('../vue.config.js')
const rawArgv = process.argv.slice(2)
const args = rawArgv.join(' ')

if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
  const report = rawArgv.includes('--report')

  run(`vue-cli-service build ${args}`)

  const port = 9526
  const publicPath = config.publicPath

  var connect = require('connect')
  var serveStatic = require('serve-static')
  const app = connect()

  app.use(
    publicPath,
    serveStatic('./dist', {
      index: ['index.html', '/']
    })
  )

  app.listen(port, function () {
    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
    if (report) {
      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
    }

  })
} else {
  run(`vue-cli-service build ${args}`)
}

4.出此外还要引入一些其他文件

创建一个 ./resources 文件夹，里面放上 icon 和 license，就像这样resources目录
用 iss 配合 makeExeSetup 使用格外遍历，后面还有一些代码优化 都放到

最后根据package.json配置运行命令

npm run setup

生成安装程序

双击安装即可