iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >electron-builder打包配置详解
  • 745
分享到

electron-builder打包配置详解

2024-04-02 19:04:59 745人浏览 薄情痞子
摘要

目录1.基础配置2.打包目标配置3.其他平台配置4.nsis配置5.关于操作系统的配置6.更新配置这里介绍的是直接在package.JSON中直接配置使用: 1.基础配置 "buil

这里介绍的是直接在package.JSON中直接配置使用:

1.基础配置

"build": {  // 这里是electron-builder的配置
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.xxx.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build"
    }, 
    // windows相关的配置
    "win": {  
      "icon": "xxx/icon.ico"//图标路径 
    }  
  }

2.打包目标配置

"win": {  // 更改build下选项
    "icon": "build/icons/aims.ico",
    "target": [
      {
        "target": "nsis" // 我们要的目标安装包
      }
    ]
  },

3.其他平台配置

  "dmg": { // MacOSdmg
    "contents": [
      ...
    ]
    },
    "mac": {  // mac
      "icon": "build/icons/icon.icns"
    },
    "linux": { // linux
      "icon": "build/icons"
    }

4.nsis配置

"nsis": {
  "oneClick": false, // 是否一键安装
  "allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
  "allowToChangeInstallationDirectory": true, // 允许修改安装目录
  "installerIcon": "./build/icons/aaa.ico",// 安装图标
  "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
  "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
  "createDesktopShortcut": true, // 创建桌面图标
  "createStartMenuShortcut": true,// 创建开始菜单图标
  "shortcutName": "xxxx", // 图标名称
  "include": "build/script/installer.nsh", // 包含的自定义nsis脚本 这个对于构建需求严格得安装过程相当有用。
},

5.关于操作系统的配置

CLI参数

electron-builder --ia32 // 32位
electron-builder        // 64位(默认)

nsis中配置

"win": {
  "icon": "build/icons/aims.ico",
  "target": [
    {
      "target": "nsis",
      "arch": [ // 这个意思是打出来32 bit + 64 bit的包,但是要注意:这样打包出来的安装包体积比较大,所以建议直接打32的安装包。
        "x64", 
        "ia32"
      ]
    }
  ]
}

6.更新配置

"publish": [
  {
    "provider": "generic", // 服务器提供商 也可以是GitHub等等
    "url": "Http://xxxxx/" // 服务器地址
  }
],

完整配置

"build": {
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.leon.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build"
    }, 
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",// 安装图标
      "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      "createDesktopShortcut": true, // 创建桌面图标
      "createStartMenuShortcut": true,// 创建开始菜单图标
      "shortcutName": "xxxx", // 图标名称
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本
    },
    "publish": [
      {
        "provider": "generic", // 服务器提供商 也可以是gitHub等等
        "url": "http://xxxxx/" // 服务器地址
      }
    ],
    "files": [
      "dist/electron*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "build/icons"
    }
  }

参考:github.com/QDMarkMan/CodeBlog/blob/master/Electron/electron-builder

到此这篇关于electron-builder打包配置详解的文章就介绍到这了,更多相关electron-builder打包内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: electron-builder打包配置详解

本文链接: https://www.lsjlt.com/news/163465.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • electron-builder打包配置详解
    目录1.基础配置2.打包目标配置3.其他平台配置4.nsis配置5.关于操作系统的配置6.更新配置这里介绍的是直接在package.json中直接配置使用: 1.基础配置 "buil...
    99+
    2024-04-02
  • vite + electron-builder 打包配置详解
    目录创一个vite项目安装打包工具配置桌面环境创建 主进程 main.js添加electron 运行命令打包项目,生成dist解决资源无法加载开发环境:热更新两个工具 concurr...
    99+
    2024-04-02
  • electron-builder该怎么打包配置
    electron-builder该怎么打包配置,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。小编介绍的是直接在package.json中直接配置使用:1.基础配置"...
    99+
    2023-06-28
  • electron-builder打包的示例分析
    这篇文章主要介绍了electron-builder打包的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。开发electron客户端程序...
    99+
    2024-04-02
  • Electron学习应用程序打包实例详解
    目录引言如何将应用程序打包(Win)1、关于package.js文件详解2、使用electron-packager打包3、使用electron-builder打包整体感受效果引言 人...
    99+
    2024-04-02
  • electron打包的坑如何解决
    这篇文章主要介绍“electron打包的坑如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“electron打包的坑如何解决”文章能帮助大家解决问题。两种方式,electron-builder打...
    99+
    2023-07-05
  • electron打包中的坑如何解决
    这篇文章主要讲解了“electron打包中的坑如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“electron打包中的坑如何解决”吧!问题一:css文件中图片加载失败问题描述问题是这样...
    99+
    2023-07-05
  • Electron打包React生成桌面应用方法详解
    目录一、Electron简介二、搭建准备三、创建基本应用程序四、打包项目一、Electron简介 Electron是一个能让你使用JavaScript,HTML和CSS来创建桌面应用...
    99+
    2022-12-21
    Electron React桌面应用 Electron打包桌面应用
  • android studio 3.0 gradle 打包脚本配置详解
    本文介绍了android studio 3.0 gradle 打包脚本配置,分享给大家,具体如下:修改输出的名字 保存输出的文件路径def fileArray = []//遍历输出文件 android.applicationVariant...
    99+
    2023-05-30
    android gradle 脚本
  • electron打包中的巨坑解决记录
    目录吐槽问题一:css文件中图片加载失败问题描述解决过程补充问题二:无法使用cookie问题描述原因分析总结吐槽 从上周五到今天,我被electron打包折磨得死去活来,本来想让...
    99+
    2023-03-01
    electron打包坑解决 electron 打包
  • vue.config.js打包优化配置
    百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻 优化方向 1.图片资源压缩 2.将 productionS...
    99+
    2024-04-02
  • Go实现一个配置包详解
    目录需求config 包实现反序列化序列化通过环境变量/命令行参数指定配置文件封装反序列化序列化统一出口函数config 包使用总结在现代软件开发中,配置文件是不可或缺的一部分。在编...
    99+
    2023-05-18
    Go实现配置包 Go 配置
  • 用electron打包vue项目中的报错问题及解决
    目录1.  首先一定要cd到项目的根目录2.  接下来运行如何用electron打包vue项目,请参见我的另一篇文章:如何用electron打包vue项目为桌面应...
    99+
    2024-04-02
  • 关于electron-vue打包后运行白屏的解决方案
    目录electron-vue打包后运行白屏的解决electron-vue打包之后只有空白页问题原因electron-vue打包后运行白屏的解决 找到.electron-vue文件夹中...
    99+
    2022-11-13
    electron-vue打包 electron-vue打包运行白屏 electron-vue运行白屏
  • Angular10怎么配置webpack打包
    小编给大家分享一下Angular10怎么配置webpack打包,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!对于 Angular 项目,推荐使用 angular-...
    99+
    2023-06-14
  • Java打包工具jar包详解
    Java打包工具是Java开发工具中比较常用的一种,代码重新打包工具jarjar可以帮助你将其它用到的java库打包并嵌入到你自己的项目jar包中。这样做的原因有: 当你发布项目的时...
    99+
    2024-04-02
  • Golang如何打包配置文件
    这篇文章主要介绍了Golang如何打包配置文件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。背景最近在写一个涉及到管理阿里云 ECS 的 CLI 工具,这里当然就要考虑阿里云...
    99+
    2023-06-22
  • Windows 平台下,Python 打包接口程序的安装与配置详解。
    Windows 平台下,Python 打包接口程序的安装与配置详解 Python 作为一种高级编程语言,具有易学易用、开源免费、跨平台等优点,越来越受到广大开发者的青睐。而在实际项目开发中,为了更好地封装代码、管理依赖库、方便部署等原因,我...
    99+
    2023-09-09
    打包 接口 windows
  • 使用PyInstaller 打包配置文件
    目录PyInstaller打包配置文件(一) 仅打包python文件(二) 打包python文件与资源文件pyinstaller打包后,配置文件无法正常读取问题P...
    99+
    2024-04-02
  • Vue打包路径配置过程
    目录Vue打包路径配置1. 配置文件2. 打包示例(npm/cnpm run build)解决打包路径配置的问题问题原因解决Vue打包路径配置 1. 配置文件 module.expo...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作