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

本文介绍如何将vue项目利用nw.js打包成桌面应用,特别是兼容XP系统。通过调整vuecli项目,添加nw插件,设置打包路径,并实现自动更新功能。同时,提供了解决history路由模式报错的方法以及美化安装程序的步骤。
摘要由CSDN通过智能技术生成

前言

目前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 -
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值