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

相关推荐
kels88991 天前
多品种贵金属 Tick 怎样无缝合并回测?
笔记·python·信息可视化·金融·开发
人间凡尔赛2 天前
AI 编程进入 Agent 时代:2026 年 CLI 效率工具实战指南(Claude Code × Codex 横评)
开发·工具·效率
会思想的苇草i8 天前
oMLX 部署本地大模型
大模型·ai编程·开发·本地部署·omlx
深念Y11 天前
MSYS2 是什么,要不要装?
运维·环境·开发·工具·msys2
AOwhisky13 天前
云原生 DevOps 工具链从入门到实战(第一期)——DevOps概述与GitLab部署——从理念到工具落地
运维·ci/cd·云原生·gitlab·开发·devops
xcLeigh19 天前
从搜索引擎到 AI 编程:开发者获取知识方式的范式转移
人工智能·ai·架构·ai编程·开发·范式转移
一条泥憨鱼2 个月前
Java开发效率神器:Lombok从入门到精通!
java·后端·学习·开发·lombok
腾讯位置服务2 个月前
4月产品上新|魔方洞察、智能选址、打车服务三大Skills上线,两轮车熄屏导航同步升级!
大数据·开发·skill·龙虾·腾讯位置服务
一条泥憨鱼2 个月前
Codex App 从0到1完整入门教程
经验分享·agent·开发·codex
rannn_1112 个月前
从 Function Calling 到 Tool Use:三大 LLM Agent 工具调用机制原理与设计对比
python·ai·agent·开发