Vue项目打包为桌面应用

vue项目首先使用 npm run build 打包为dist文件后,进入dist目录得到如下文件:就是打包后的html+css+js+static

新建一个deskapp文件夹,里面在新建一个App文件夹,把打包好的dist里面的所有文件拷贝到App文件夹里面:

然后我们需要用到一个安装包的json文件,在deskapp文件夹中新建一个package.json文件,拷贝下面的内容:
{
"name": "deskapp",
"version": "1.0.0",
"description": "",
"main": "App/index.html",
"window": {
"title": "我的桌面应用",
"icon": "",
"width": 1366,
"height": 768,
"toolbar": false,
"frame": true,
"resizable": true,
"position": "center",
"transparent": false,
"show": true
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dist": "build --tasks win-x86,win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
"start": "run --x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"nwjs-builder-phoenix": "^1.15.0"
},
"build": {
"nwVersion": "0.27.5"
}
}

然后在deskapp文件下打开cmd, npm i 回车 安装依赖包

然后继续执行正式打包桌面应用的命令:npm run dist 回车

会得到一个dist文件:

进入dist文件夹有两个文件,其中x64 就是打包好的桌面应用,双击进入会看到exe文件,点击即可打开你的桌面应用了。

最后,其实就是打包的html+css+js的文件,那么纯静态网页文件也可以使用这个方法打包成电脑端的桌面应用。

相关推荐
csdn_wuwt10 天前
前后端中Dto是什么意思?
开发语言·网络·后端·安全·前端框架·开发
csdn_wuwt13 天前
有C#可用的开源的地图吗?
后端·c#·gis·map·开发·设计·地图
天若有情67319 天前
新闻通稿 | 软件产业迈入“智能重构”新纪元:自主进化、人机共生与责任挑战并存
服务器·前端·后端·重构·开发·资讯·新闻
程序员鱼皮23 天前
我发现很多程序员都不会打日志。。。
计算机·程序员·编程·开发·软件开发·编程经验
vortex51 个月前
用 Scoop 快速部署 JeecgBoot 开发环境:从依赖安装到服务管理
java·windows·springboot·web·开发·jeecg-boot
闲人编程1 个月前
Docker化你的Python应用:从开发到生产
python·docker·eureka·开发·生产·codecapsule
王嘉俊9251 个月前
HarmonyOS 微服务与 OpenHarmony 开发:构建模块化与开源生态应用
微服务·开源·harmonyos·arkts·开发·鸿蒙
王嘉俊9252 个月前
Django 入门:快速构建 Python Web 应用的强大框架
前端·后端·python·django·web·开发·入门
Aevget2 个月前
「Java EE开发指南」如何用MyEclipse开发Java EE企业应用程序?(二)
java·ide·java-ee·开发·myeclipse