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的文件,那么纯静态网页文件也可以使用这个方法打包成电脑端的桌面应用。

相关推荐
翰佰尔生物HiOmics云分析4 天前
老年COVID-19重症化风险预测机器学习在线工具技术解析
机器学习·开发·预测·covid-19
PHP实战开发录4 天前
Nginx上传大文件为什么报413
nginx·php·开发
PHP实战开发录6 天前
PHP Session为什么会拖慢并发请求
系统架构·php·开发
PHP实战开发录7 天前
MySQL连接数为什么会打满
系统架构·php·开发
PHP实战开发录9 天前
PHP接口偶发变慢怎么查
前端·php·开发
PHP实战开发录11 天前
PHP接口怎么防重复提交
系统架构·php·开发
PHP实战开发录13 天前
PHP脚本手动能跑定时任务却失败
开发语言·php·开发
PHP实战开发录14 天前
PHP接口超时后为什么任务还在跑
开发语言·前端·php·开发
PHP实战开发录15 天前
PHP日志写满磁盘后接口为什么异常
开发语言·系统架构·php·开发
PHP实战开发录15 天前
PHP事务异常后为什么数据还写进去了
mysql·php·开发