vue项目使用nwjs打包、替换exe桌面图标以及exe内容的图标全教程

关于vue项目使用nwjs打包、替换exe桌面图标以及exe内容的图标全教程

单纯的打包exe（不含更改exe桌面图标以及内容图标）

前言：首先我们需要有一个自己的vue项目。
1）单纯前端自己玩的vue项目
2）前后端联调的项目
注释：如果为第一种可以忽略下面步骤一

第一步：首先将vue项目中axios.js中的baseURL路径配置成后端线上IP地址以及端口号

第二步：将自己的vue项目指定指令进行打包，打包后选择在电脑中创建一个新的文件夹（这里创建deskApp）

第三步：创建完成后，将原vue打包的dist中内容复制到deskApp中，并在文件中增加package.json,内容为以下片段

{
  "name": "deskApp",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "node-remote": "",
  "window": {
    "title": "桌面应用",
    "width": 1920,
    "icon": "",
    "height": 1080,
    "toolbar": true,
    "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"
  }
}

注释：
title : 字符串，设置默认 title。
width/height : 主窗口的大小。
toolbar : bool 值。是否显示导航栏。
icon : 窗口的 icon。
position :字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。
min_width/min_height : 窗口的最小值。
max_width/max_height : 窗口显示的最大值。
resizable : bool 值。是否允许调整窗口大小。
always-on-top : bool 值。窗口置顶。
fullscreen : bool 值。是否全屏显示。
show_in_taskbar : 是否在任务栏显示图标。
frame : bool 值。如果设置为 false，程序将无边框显示。
"chromium-args" :"-allow-file-access-from-files" 相当于给谷歌浏览器添加启动参数一样，这行代码允许angularjs直接访问本地json文件。

第四步：完成以上内容，可以说打包已经完成了80%的任务了，接下来需要我们执行指定命令了。找到deskApp

按住 Shift 右键鼠标找到 Powershell 进入当前文件目录后，执行 npm install ,在执行 npm run dist 。接下来你就会在deskApp中看到新的dist文件夹，点击进去后可以看到对应生产的exe文件啦。到这vue项目打包已经完成啦。开心不，激动不，是不是很有成就感。

打包exe后，更改exe桌面图标以及内容图标

前言：如果我们想将任务栏的图标改成自己想要的，一个简单的操作教你怎么玩。

替换任务栏中的图标（替换位置为上方package.json中window下面的icon，替换完记得重新打包）

找到deskApp文件创建一个文件夹（assets）将自己想要的图片扔上去，接下来重点来了本人踩坑半小时才得出的结论。我们的图片必须是png格式，同时大小必须是128*128，否则一律不认（神坑）

替换exe打开后的图标（借助工具）

这项操作通过代码就无能为力了，此时我们借助工具（Resource Hacker，也可以使用其他的，一下介绍为该工具）
打开Resource Hacker→→→File→→→Open（找到我们对应的exe）→→→ Icon Group（找到该文件点击，并点击第一个） →→→ Replace Icon（鼠标右键） →→→ 点击Open，找到我们想要的ico（图片转ico可以网上随意找网站免费生成） →→→ 点击Replace →→→ 记得点保存哟，这时你的exe图标就替换完毕啦（重要知识点，替换完后，并不会第一时间生效，此时可以尝试关机重启、打包发给他人、更换文件夹路径，进行查看）