【electron 4】electron配置打包环境

这篇具有很好参考价值的文章主要介绍了【electron 4】electron配置打包环境。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先要准备应用图标

window需要:ico
mac需要:icns
linux需要png
借助:electron-icon-builder

安装:

npm i electron-icon-builder -D

配置package.json scripts

"build-icon": "electron-icon-builder --input=./electron/assets/icon.png --output=./electron/build --flatten"

说明:
input:icon.png是我需要引入的图标
output:是我将input引入图标所转换不同大小不同格式的图标输出文件

配置打包:electron-forge

因为我是已有的项目了,所以这里我只需要安装并引入electron-forge,虽然我进行配置了项目,但是我为了图省事用了electron框架,所以我必须用electron-builder进行配置打包了,所以这里针对electron-forge的笔记可能会比较浅薄。

npm install --save-dev @electron-forge/cli
npm exec --package=@electron-forge/cli -c "electron-forge import"

因为配置时没考虑到maker,所以很容易忽略这段安装:

npm install --save-dev @electron-forge/cli @electron-forge/maker-squirrel @electron-forge/maker-deb @electron-forge/maker-zip

package.json示例:

devDependencies: {
    "@electron-forge/cli": "^7.4.0",
    "@electron-forge/maker-deb": "^7.4.0",
    "@electron-forge/maker-dmg": "^7.4.0",
    "@electron-forge/maker-rpm": "^7.4.0",
    "@electron-forge/maker-squirrel": "^7.4.0",
    "@electron-forge/maker-zip": "^7.4.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
    "@electron-forge/plugin-fuses": "^7.4.0",
}

scripts: {
    "build:os": "electron-forge package",
    "build:maker": "electron-forge make",
}

config: {
    "forge": "./config.forge.js"
  }

config.forge.js配置

module.exports = {
  "packagerConfig": {
    version: '0.0.1',
    appVersion: '0.0.1',
    name: 'electron-umi',
    productName: 'viefong',
    icon: 'electron/build/icons',
    out: './release/',
    overwrite: true,
    asar: true,
    "copyright": "Copyright © 2024",
    // "ignore": [ // 不需要打包的文件和文件夹的路径列表
    //   ".git",
    //   ".vscode",
    //   "node_modules/.cache",
    //   "src"
    // ],
    descriptions: '微鳯即时通讯工具',
    // 配置其他构建器(特殊情况下使用)
    "win": { // Windows平台的配置
      "target": "nsis", // 打包的目标格式为NSIS安装程序
      "icon": "./electron/build/icons/icon.ico", // Windows平台的图标路径
      "publisherName": "electron-umi开发者团队", // 发布者名称
      "fileAssociations": [ // 关联文件类型的配置
        {
          "ext": "myext", // 文件扩展名
          "name": "electron-umi", // 文件类型名称
          "description": "electron-umi即时通讯工具", // 文件类型描述
          "role": "Editor" // 文件类型的角色
        }
      ],
      "certificateFile": "path/to/certificate.pfx", // 数字证书文件的路径
      "certificatePassword": "password123" // 数字证书的密码
    },
    "mac": { // macOS平台的配置
      "target": "dmg", // 打包的目标格式为DMG镜像
      "icon": "./electron/build/icons/icon.icns", // macOS平台的图标路径
      "category": "public.app-category.utilities", // 应用程序的分类
      "extendInfo": { // 扩展应用程序包的配置
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true // 允许应用程序加载任意的网络资源
        }
      }
    },
    "linux": { // Linux平台的配置
      "target": "deb", // 打包的目标格式为DEB包
      "icon": "./electron/build/icons/icon.png", // Linux平台的图标路径
      "category": "Utility", // 应用程序的分类
      "description": "electron-umi即时通讯工具", // 应用程序的描述
      "desktop": { // 创建桌面快捷方式的配置
        "Name": "electron-umi", // 快捷方式的名称
        "Comment": "electron-umi", // 快捷方式的注释
        "Exec": "./viefong", // 快捷方式的执行命令
        "Terminal": false // 是否在终端中打开应用程序
      }
    }
  },
  "makers": [
    {
      "name": "@electron-forge/maker-squirrel",
      "config": {
        "name": "electron_quick_start",
        "setupIcon": "./electron/build/icons/icon.ico"
      }
    },
    {
      "name": '@electron-forge/maker-dmg',
      "config": {
        "format": 'ULFO',
        icon: './electron/build/icons/icon.icns'
      }
    },
    {
      "name": "@electron-forge/maker-deb",
      "config": {
        options: {
          icon: './electron/build/icons/icon.icns'
        }
      }
    },
    {
      "name": "@electron-forge/maker-rpm",
      "config": {}
    }
  ],
  "hook": {}
}

配置打包:electron-builder

安装:

yarn add electron-builder --dev

配置,在package.json中直接复制进去即可:

"build": {
    "appId": "com.electron.app",
    "files": [
      "dist",
      "node_modules",
      "package.json"
    ],
    "nsis": {
      "artifactName": "electron-umi",
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./electron/build/icons/icon.ico",
      "uninstallerIcon": "./electron/build/icons/icon.ico",
      "installerHeaderIcon": "./electron/build/icons/icon.ico",
      "installerSidebar": "./electron/build/icons/sidebar-164x314.bmp",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "include": "./electron/build/installer.nsh"
    },
    "asar": true,
    "asarUnpack": "**\\*.{node,dll}",
    "afterSign": "electron/.erb/scripts/notarize.js",
    "mac": {
      "target": {
        "target": "default",
        "arch": [
          "arm64",
          "x64"
        ]
      },
      "type": "distribution",
      "hardenedRuntime": true,
      "entitlements": "electron/assets/entitlements.mac.plist",
      "entitlementsInherit": "electron/assets/entitlements.mac.plist",
      "gatekeeperAssess": false,
      "icon": "electron/build/icons/icon.icns"
    },
    "dmg": {
      "icon": "electron/build/icons/icon.icns",
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    // 自动更新
    "publish": {
      "provider": "github",
      "owner": "electron-umi",
      "repo": "electron-umi"
    },
    "directories": {
      "app": "release/app",
      "buildResources": "assets",
      "output": "release/build"
    }
  },

注:因为我项目中用的是umi脚手架搭建的react,打包后,是空白页面,所以要在.umirc.ts中配置一下即可文章来源地址https://www.toymoban.com/news/detail-860990.html

history: {
    type: 'hash',
}

到了这里,关于【electron 4】electron配置打包环境的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 银河麒麟v10安装前端环境(Node、vue、Electron+vite)

    此帖子所提到的所有依赖包都是基于银河麒麟v10真机的arm架构包,如果是在windows上的虚拟机上 把依赖包换成x64的包即可,方法步骤都是一样 一.node安装 原始方法安装(建议用第二种nvm方法,因为更简单): 1.1nodejs官网下载基于arm架构的包 1.1.1或者打开终端使用wget方式安装

    2024年02月02日
    浏览(43)
  • 【Electron】使用electron-builder打包时下载electron失败或慢的解决方案

    问题描述 electron-builder打包时报错信息如下: 解决 该问题是因为electron包需要翻墙获得,需要全局代理,但是太麻烦,我们一般是修改镜像源 在项目根目录下创建.npmrc文件,并且输入以下配置:

    2024年02月11日
    浏览(43)
  • electron应用打包成功纪念一下

    electron应用打包成功纪念一下,以前曾经行过后来打包各种报错,现在有空就尝试解决一下 首先安装nvm能够方便切换node版本 顺利安装后你用nvm list查看node列表时会告诉你这个nvm不存在 回到最初版本然后打包看各种错误 还有一种错误是定位到js文件catch后面的{,这时只需要再

    2024年02月10日
    浏览(39)
  • electron使用electron-builder进行MacOS的 打包、签名、公证、上架、自动更新

    由于electron在macOS下的坑太多,本文不可能把所有的问题都列出来,也不可能把所有的解决方案贴出来;本文也不太会讲解每一个配置点为什么要这么设置的原因,因为有些点我也说不清,我尽可能会说明的。所以,你要抛弃你之前所有已经完成的东西,最好弄一个全新的系统

    2024年02月03日
    浏览(39)
  • 【electron】electron安装过慢和打包报错:Unable to load file:

    一、安装过慢问题: 一直处于安装过程 【 解决 】 二、打包报错:Unable to load file: 报错详情: 【 原因 】路径有中文,改为全英文路径

    2024年02月13日
    浏览(61)
  • electron 运行以及打包超时解决方法

    背景 我是通过vue add 的方式去添加electron相关依赖的,然后会在package.json中,自动生成运行和打包electron的命令 \\\"electron:serve\\\": \\\"vue-cli-service electron:serve\\\", 和 \\\"electron:build\\\": \\\"vue-cli-service electron:build\\\" ,运行electron,直接执行 yarn electron:serve , 打包直接执行 yarn electron:build 运行过程中

    2024年02月12日
    浏览(40)
  • electron mac打包、签名、公证、上传

    一、首先是打包,mac的打包选项有dmg、mas、zip等, dmg分为x64、arm64,分别对应intel芯片和apple m1 m2芯片 配置打包项:Mac=target=dmg[arm64,x64] 这样打包之后,用户下载dmg文件后安装打开,mac会提示该程序不受信任;好多地方说dmg是不需要签名的,但是我觉得dmg下的.app文件照样还是

    2024年02月05日
    浏览(43)
  • Electron详解(二):基本使用与项目打包

    在使用Electron进行开发之前,您需要安装 Node.js,最低工作版本为 14.x,低于 14 的版本在后面的打包过程中可能会报错。 (注意,因为 Electron 将 Node.js 嵌入到其二进制文件中,所以在 electron 应用运行时的 Node.js 版本与你本地电脑中运行的 Node.js 版本无关。) (虽然您需要在

    2024年02月11日
    浏览(41)
  • Electron从构建到打包exe应用

    创建一个文件夹,在根目录执行以下几个命令 然后运行根目录执行命令npm run start 可以在命令行中看到hellow!!,此时项目算是跑通了 1.根目录新增index.html文件,写添加html的默认代码等标签,并添加一个hellow 2.根目录新增main.js 运行npm start ,会打开一个浏览器窗口 1.根目录新加新

    2024年02月15日
    浏览(42)
  • electron-build打包报错:ERR_ELECTRON_BUILDER_CANNOT_EXECUTE

    electron-build,windows平台打包过程经常报错 : Error: C:UsersM******_C******AppDataLocalelectron-builderCachensisnsis-3.0.3.2Binmakensis.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE at ChildProcess. (H:SaveLanenode_modulesbuilder-utilsrcutil.ts:239:14) at Object.onceWrapper (events.js:422:26) at ChildProcess.emit (events.j

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包