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

前情提要

在nw.js入门最如丝般润滑的教程一文中，作者介绍了简单的使用nw运行html文件为桌面程序以及将html文件打包为桌面可执行文件exe。
看vuecli创建的工程打包成exe文件可直接从【在vuecli创建的项目基础上增加nw插件无缝转化为桌面程序】目录开始。

本文主题

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

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

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

注意：笔者尝试了下将dist文件夹放在app及package.nw目录下，然后修改package.json中的main路径，但是出现异常；而将dist目录去掉把index.html和其他文件直接放在app及package.nw目录下可以正常启动成功。可能是缓存原因
将app目录拖动至nw.exe上方运行
执行打包命令生成桌面软件
```
copy /b nw.exe+package.nw yourname.exe
```

在vuecli创建的项目基础上增加nw插件无缝转化为桌面程序

运行vue项目为桌面程序

创建vue项目

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

添加nw插件依赖
```
cnpm install nw@0.14.7-sdk --save-dev  // 官方文档说要支持xp系统请使用0.14.7版本，不考虑xp则可安装最新版
```
注意：推荐使用cnpm安装，npm安装基本失败，yarn安装也难得的不稳定！因此推荐cnpm安装
运行项目
先运行vue项目，如果出现依赖错误，删除node_modules目录然后重新cnpm install即可
以桌面软件的方式运行项目

在package.json中增加一行nwjs的文件入口代码
```
"main": "http://localhost:8080/", // 因为nw入口可以是.html,.js和线上地址。因为是本地运行，将main设置为你上一步中运行起来的项目地址
```
在package.json中scripts下增加一行脚本命令
```
"serve:nw": "nw",
```
然后在编辑器终端输入 npm run serve:nw 即可启动桌面版vue项目

打包vue项目为桌面程序

使用插件打包：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.org/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.org/mirrors/nwjs/ .", // 打包多版本

在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格式，自动更新用的到]
},

修改vue.config.js，将打包路径设置为相对路径,cli2版本不再赘述
```
module.exports = {publicPath: './',productionSourceMap: false,
}
```
完成这三步之后，在终端运行npm run build:nw即可生成打包后的桌面软件文件夹。找到里面的your name.exe然后双击运行即可。

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

自动更新

常见问题（踩坑）

vuecli3+默认的路由模式为history，使用nw打包后会报错，将router.js中的mode: history注释即可。
如果将build/overriddenProperties/mian的值设置为一个网址打包后软件也是可运行的，在xp上也没问题，是不是理论上只要网站一直保持运行和最新内容，这个软件包就无须更新永远是最新的？

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

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

文件见package.json

打包后目录

运行效果

Github地址

nw-vue-demo

目前js打包桌面程序最流行的是electron，但是这个入门交简单文章也多，暂不赘述，同有项目地址：electron-vue-demo

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

Python 打包适用于win 7/xp系统的应用程序(exe)
** 在win10/11系统上打包适用于win 7/xp系统的Python应用程序(exe)(全过程) ** 一.安装合适的Anaconda包与合适版本的Python 1.安装合适的Anaconda包 ...
vue项目打包出错：Unexpected token arrow «=＞», expected punc «,» [static/js/chunk-1558f5a0.b64bfa00.js:626,2
vue项目打包出错:Unexpected token arrow «=>», expected punc «,» [static/js/chunk-1558f5a0.b64bfa00.js:62 ...
(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
Vue项目打包后js文件压缩
前言这段时间因为免费试用了https://free.aliyun.com/一台阿里云的服务器,配置是 2核4G 2M, 因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加 ...
打包指令_将Vue项目打包为Windows应用（.exe）
2021年1月9日更新: 新增:解决国内用户下载electron速度太慢的问题调整:由于electron版本升级,删除原文中对electron版本限制在2.0的命令行语句背景朋友是做商品零售,每 ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样
场景 electron-vue 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码. 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序 ...
vue项目打包到腾讯云服务器全过程
本文将记录vue项目打包放到服务器的整个过程,本文中的例子是express+vue,希望能给遇到这方面问题的同学一个解决办法. 登录服务器假定已经拥有一个服务器账号,然后下载一个xftp5用来作文件 ...
vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发,测试) 打包手动配置文件打包压缩,大文件处理 gzip进一步压缩打包app 打包部署模式 vu ...