electron项目打包成dmg

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中的信息是安装包自身配置的属性，比如展示的名称和图标。

配置完后执行：

appdmg appdmg.json ~/Desktop/test.dmg

执行玩命令之后，桌面便生成了可安装的dmg 

点击，执行安装，安装成功之后如下图所示：

打开后界面如下： 

我的项目目录如下图所示：

演示功能很简单，就是路径指向了百度

 

 参考文件：electron项目打包成dmg - ViCanary - 博客园

Electron给index.html添加桌面APP外壳_山外人家的博客-CSDN博客

Electron项目打包_越陌度阡-CSDN博客_electron 打包