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

1. 打包为桌面应用

2.修改图标

1. 打包为桌面应用

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

npm run build

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

里面有这几个文件组成

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

扫描二维码关注公众号，回复： 15281181 查看本文章

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文件

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script language="javascript" type="text/javascript">
      // 就是套个壳子，使用这个直接跳转到线上地址，这样就不用每次修改重新打包了
      window.location.href = "http://erp.phadcalc.com/";
    </script>
  </body>
</html>

以上文件配置就完成了

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

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