MENU

使用electron-builder打包应用

January 8, 2019 • Read: 113 • 安全阅读设置

0x01 简介

Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

CaptfEncoder一款electron写的比较方便的小工具,但最近系统更新后发现不能用了,记录下electron-builder打包App的过程。


0x02 环境

# node
brew install node

# vue-cli
sudo npm install -g vue-cli 

# yarn
brew install yarn
yarn --version

# electron
sudo npm cache verify
sudo npm install electron -g 

# electron-builder
sudo yarn global add electron-builder
electron-builder --version

安装过程中遇到给了root权限仍然提示无法创建目录报错话,npm install后添加--unsafe-perm=true --allow-root即可。


0x03 配置

  • 1.修改main.js解决打包后界面无法复制粘贴
if (process.platform === 'darwin') {
    const template = [
      {
        label: "Application",
        submenu: [
          { label: "复制", accelerator: "CmdOrCtrl+C", selector: "copy:" },
          { label: "粘贴", accelerator: "CmdOrCtrl+V", selector: "paste:" },
          { label: "退出", accelerator: "Command+Q", click: function() { app.quit(); }}
        ]
      }
    ];
    Menu.setApplicationMenu(Menu.buildFromTemplate(template))
  } else {
    Menu.setApplicationMenu(null);
  }
  • 2.修改package.json配置信息
{
  "name": "captfencoder",
  "version": "1.2.0",
  "description": "CaptfEncoder 跨平台网络安全工具套件",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/guyoung/CaptfEncoder",
  "keywords": [],
  "license": "",
  "author": "guyoung",
  "contributors": [],
  "dependencies": {},
  "devDependencies": {
    "electron": "^2.0.3"
  },
  "build": {
    "appId": "com.guyoung.captfencoder",
    "productName": "CaptfEncoder",
    "directories": {
      "output": "./"
    },
    "mac": {
      "category": "public.app-category.developer-tools",
      "icon": "icons/app_ico.icns"
    },
  }
}

0x04 打包

electron-builder --macos


0x05 引用

Electron 从零创建一个 Windows/OS X/Linux 的桌面可执行程序
electron-builder 打包工具的最简化使用