electron项目打包成dmg

最新推荐文章于 2024-09-13 07:15:31 发布

_陌子曦

最新推荐文章于 2024-09-13 07:15:31 发布

阅读量2.9k

点赞数

分类专栏： electron 文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/qciwyy/article/details/122359374

版权

electron 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

本文详细介绍了如何利用 Electron 的 electron-forge 工具和 appdmg npm 包创建Mac应用，并打包成DMG安装文件。首先，通过npx或yarn创建Electron项目，然后配置appdmg.json文件，指定应用信息和窗口大小。最后，运行appdmg命令生成DMG文件，完成安装包制作。整个过程包括项目初始化、构建、配置和打包等步骤。

摘要由CSDN通过智能技术生成

1.通过脚手架搭建的项目

官方文档有很详细的教程： electron-forge

https://github.com/electron-userland/electron-forge

我采用的如下命令构建demo项目。

npx create-electron-app my-new-app
或
yarn create electron-app my-new-app

npx可能会慢或者执行不成功，最好使用yarn构建，速度比较快，如果没有安装yarn，可以执行下面命令进行安装

cnpm install -g yarn
或
npm install -g yarn

使用官方 electron-quick-start 的demo。之后在其根目录下执行：

# 注意node的版本，我使用的v16.13.1
npx @electron-forge/cli import
npm run make

成功后在你的根目录下生成一个out文件。

使用appdmg做成dmg包

appdmg是一个npm包。

npm install -g appdmg

appdmg.json配置如下

{
    "title": "MyApp",
    "icon": "app.icns",
    "background": "bg.png",//
    "contents": [
      { "x": 380, "y": 170, "type": "link", "path": "/Applications" },
      { "x": 200, "y": 170, "type": "file", "path": "out/my-new-app-darwin-arm64/my-new-app.app" } //这是上一步electron forge生成的东西，指定好目录就行了。
    ],
    "window": {
        "size": {
            "width": 580,
            "height": 360
        }
    },
    "format": "UDBZ"
}

需要注意的是electron forge主要管控的是安装时的行为。安装包安装后展示的在lunch中的信息是安装包自身配置的属性，比如展示的名称和图标。

配置完后执行：