vue项目打包成桌面应用并修改图标

目录

1. 打包为桌面应用

2.修改图标

3.发现问题：这个打包出来在使用的时候发现里面有些界面样式不兼容，就换了一个打包方式

---

1. 打包为桌面应用

1.在vux项目的终端执行打包

npm run build

2.会在项目文件夹里面出现一个dist文件夹

里面有这几个文件组成

 

 3.在这里需要添加一个 package.json 文件

 package.json 内容

{
  "name": "鼠标放图标上面的提示文字",
  "version": "1.0.0",
  "description": "应用介绍",
  "main": "/index.html", // html文件的路径，就是当前文件夹那个
  "nodejs":true,
  "window": {
    "title": "ERP",// 右边任务栏的图标放上去的提示文字 有中文会乱码显示
    "icon": "./img/erp.png", // 任务栏图标路径 png格式
    "toolbar": true,
    "frame": true,
    "position": "center",
    "width": 1920,
    "height": 1080,
    "show_in_taskbar": true // 是否在任务栏显示图标
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dist": "build --tasks win-x86,win-x64,win-x32 --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"
  }
}

html文件实际上不用修改就可以直接使用，但是我用过其他方式打包发现可以修改html文件，以后就不用再打包文件重新生成桌面应用，所以我做了修改

html文件

以上文件配置就完成了

把dist文件夹拖到编辑器打开终端

4.在终端重新打包这个新的文件夹

npm install //安装打包所需要的依赖 只安装一次，以后重新打包不用安装

以后更换地址只需要执行这一步 

 npm run dist //打包项目为 exe 文件

 完成之后这个文件夹会出现一个dist文件夹

 5.dist文件夹就是打包好的桌面应用了

 6.打开64位的这个文件夹

 7.双击exe文件就可以打开了

2.修改图标

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

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

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

打开这个插件 

 把exe文件拖到这个里面

1.点击左边菜单的图标

2.点击替换图标 

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

 

 

 4.保存

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

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

 打开的效果

 

3.发现问题：这个打包出来在使用的时候发现里面有些界面样式不兼容，就换了一个打包方式

有可能是我自己封装的内容的问题，新的封装方法更方便和全面

nw.js封装桌面应用_白云~️的博客-CSDN博客