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

相关推荐
程序员鱼皮11 天前
Claude 4炸裂发布!凭什么敢称宇宙最强编程 AI?
计算机·ai·编程·开发·代码
百锦再13 天前
安卓无障碍脚本开发全教程
android·手机·脚本·开发·mobile·phone·无障碍
程序员鱼皮14 天前
炸裂!Spring AI 1.0 正式发布,让 Java 再次伟大!
java·计算机·ai·程序员·互联网·开发
程序员鱼皮18 天前
不是哥们,26 岁程序员,去种头发了?
计算机·程序员·互联网·开发
Python智慧行囊19 天前
Django 项目创建全攻略
django·web·开发
mochensage22 天前
bili.png
开发
K龙22 天前
私有资产测绘&安全流水线Shovel
运维·安全·开发·其它
杨浦老苏1 个月前
代码片段存储解决方案ByteStash
docker·开发·群晖
菠萝崽.1 个月前
安装docker,在docker上安装mysql,docker上安装nginx
java·mysql·nginx·docker·软件工程·springboot·开发