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

相关推荐
NoneCoder11 小时前
Java企业级开发系列(1)
java·开发语言·spring·团队开发·开发
暂时先用这个名字11 天前
vue开发的时候,目录名、文件名、函数名、变量名、数据库字段等命名规范
前端·数据库·vue.js·vue·开发·开发规范·命名规范
闲人编程12 天前
javascript网页设计案例
前端·javascript·开发·模态窗口·图片轮播
无名之逆14 天前
跳表:数据结构中的“快速通道”
数据结构·考研·算法·面试·编程·开发·期末
Amd79415 天前
Nuxt.js 应用中的 builder:watch 事件钩子详解
生命周期·开发·文件·nuxt·构建·钩子·变化
无名之逆1 个月前
大一计算机课程之线性代数
开发语言·线性代数·考研·计算机·面试·开发·期末
Amd7941 个月前
Nuxt.js 应用中的 kit:compatibility 事件钩子详解
浏览器·开发·应用·nuxt.js·插件·兼容性·钩子
程序员鱼皮1 个月前
高产胜那啥,带你上线我的新项目!
前端·后端·计算机·程序员·互联网·开发·项目·编程经验
我叫于豆豆吖1 个月前
【k8s】:DevOps 模式详解
运维·开发·敏捷
网络研究院2 个月前
由于安全风险,安全领导者考虑禁止人工智能编码
人工智能·安全·开源·开发·风险·技术·代码