vue项目使用nw.js打包成桌面应用并修改图标 封装桌面应用

目录

1.下载nw

 2.修改图标

3.封装为安装包

---

1.下载nw

NW.js

下载下来的内容如下 

 在这个文件夹里面新建 package.json文件

{
  "main": "项目线上地址 http://xxx.xx.xx/#/",
  "name": "应用名称",
  "description": "应用介绍",
  "version": "1.0",
  "keywords": [],
  "window": {
    "title": "窗口左上角展示的应用名称",
    "icon": "logo.png",//左上角及桌面任务栏展示的logo图片
    "toolbar": true,
    "frame": true,
    "width": 1000,
    "height": 600,
    "position": "center",
    "min_width": 400,
    "min_height": 200,
    "resizable": true,
    "fullscreen": false
  },
  "webkit": {
    "plugin": true
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

双击exe应用就可以打开了

需要在电脑上面同时打开两个相同的应用，就复制一份，然后修改package.json里面的name属性成不一样的值就可以了

 2.修改图标

这个图标不好看，需要修改图标

这里需要下载一个插件来修改图标

resource hacker中文版下载2022最新版-Resource Hacker(ResHacker)下载v5.1.8.360 绿色中文版-西西软件下载

打开这个插件 

 把exe文件拖到这个里面

1.点击左边菜单的图标

2.点击替换图标 

 3.选择新的图标进行替换

 

 

 4.保存

回去文件夹有可能会多一个副本exe可以删除，看到之前修改的exe文件的图标没有变，其实已经变了，可以选择重新启动电脑打开就会看到变了，或者你心里想这个就是你要的那种，直接打包给别人，别人看到就是修改之后的

 打包给别人是压缩外面那个包给别人，不是直接给exe文件

 打开的效果

 

3.封装为安装包

 桌面应用封装为安装包_白云~️的博客-CSDN博客