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

相关推荐
INFINI Labs5 天前
Easysearch 正式支持插件开发:让你的搜索系统真正“为你所用”
自定义·开发·插件·扩展·easysearch
陈童学哦13 天前
深度解析星云SDK破开数字人实时交互
ai·开发·具身驱动
rannn_11113 天前
【FastAPI|快速入门】第一个FastAPI程序、路由、参数、相应类型、自定义响应数据格式、异常响应处理
python·ai·fastapi·web·开发
深念Y21 天前
Token 还没白菜价,我靠“AI 流水线”省token
ai·api·agent·开发·token·工程·词元
糖炒栗子032624 天前
我用 AI 写了一套实时视频检测系统,然后推翻了它
开发
医疗信息化王工1 个月前
钉钉小程序开发实战:投诉管理系统
小程序·钉钉·开发·投诉管理
杨浦老苏1 个月前
开源的AI编程工作站HolyClaude
人工智能·docker·ai·编辑器·开发·群晖
做cv的小昊1 个月前
【conda】打包已有conda环境并在其他服务器上搭建
运维·服务器·python·conda·运维开发·pip·开发
杨浦老苏1 个月前
可视化Docker Compose构建器VCompose
运维·docker·开发·可视化·群晖
七夜zippoe1 个月前
区块链开发:从智能合约到DApp
python·区块链·智能合约·开发·dapp