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

作者：菜鸟追梦旅行 | 2024-03-28 05:20:01

踩

vue ios打包桌面端

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://npmmirror.com/mirrors/nwjs/ .",
      "start": "run --x86 --mirror https://npmmirror.com/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>