惊!使用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+orvue 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.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/ .", // 打包多版本
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 = 9526const publicPath = config.publicPathvar 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
生成安装程序
双击安装即可
惊!使用nw.js将vue项目打包为可在xp系统运行的桌面程序相关推荐
- 使用nw.js将vue项目打包为可在xp系统运行的桌面程序
前情提要 在nw.js入门最如丝般润滑的教程一文中,作者介绍了简单的使用nw运行html文件为桌面程序以及将html文件打包为桌面可执行文件exe. 看vuecli创建的工程打包成exe文件可直接从[ ...
- 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 ...
最新文章
- ICCV 2021 | 国科大提出首个CNN和Transformer双体主干网络!Conformer准确率高达84.1%!...
- Facebook开源Torchnet,加速AI研究
- OA项目14:权限管理功能分析
- python 排序统计滤波器_马尔可夫链+贝叶斯滤波器的Python展示
- EchoServer
- 精讲23种设计模式-基于装饰模式~设计多级缓存框架
- 在Linux上将视频转换成动态gif图片 (附:ffmpeg和ImageMagick安装方法)
- android广播代码汇总二__有序广播
- c if标签怎么用android,android – 使用NDK将YUV解码为C/C++中的RGB
- 使用pm2后台运行nodejs程序
- thikPHP框架部署
- 【算法学习】Fast burst images denoising
- OpManager-企业网络问题分析及故障排除
- linux拷贝文件命令
- a4纸和ipad对比_我告诉你10.2寸ipad和9.7寸对比
- 直通车的计算机设备跟移动设备的区别,电脑端直通车和手淘直通车的有什么不同?...
- python右对齐输出数字怎么办_解决python让数字右对齐的方法
- html制作网页时字体怎么设置,网页制作—字体的设置
- Python 加密 shellcode 免杀
- 蒙特卡洛与遗传算法介绍