使用Electron-builder将web项目封装客户端安装包 发布

背景：之前用electron-packager将web项目打包成客户端时，exe文件只能在当前文件夹下运行，如果发送给别人使用 极不方便。所以我们可以用electron-builder将web项目封装成安装包给别人使用。

1、配置npm代理

npm set electron_mirror=https://npm.taobao.org/mirrors/electron/
npm set electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

2、新建main.js

// Modules to control application life and create native browser window
const {app, BrowserWindow,Menu} = require('electron')
const path = require('path')
//因为项目使用server，添加了这个库，添加前，别忘了使用 npm i http-server 安装库。
const httpServer = require('http-server');


function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
  //注意 这里是我添加的，去掉electron自带菜单
  Menu.setApplicationMenu(null)
  mainWindow.loadFile('dist/index.html')
  httpServer.createServer({root:"./dist"}).listen(80);

}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

3、新建package.json

{
  "name": "apiadmin",
  "version": "4.0.0",
  "author": "zhaoxiang <zhaoxiang051405@gmail.com>",
  "private": false,
  "scripts": {
    "view": "electron .",
    "build": "electron-builder"
  },
  "main": "main.js",
  "build": {
    "productName":"nullmax",
    "appId": "com.wss.app",
    "directories": {
      "output": "builder"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./logo.ico",
      "uninstallerIcon": "./logo.ico",
      "installerHeaderIcon": "./logo.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "nullmax"
    },
    "win": {
      "target": [
        "nsis",
        "zip"
      ]
    },
    "files": [
      "dist/**/*",
      "main.js"
    ]
  },
  "dependencies": {
    "http-server": "^14.1.1"
  }
}

package.json解释： http://www.45fan.com/article.php?aid=1CODrX8UJM4TUTnc

"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"
    }
  }

4、打包

npm run build

发送 apiadmin Setup 4.0.0.exe给他人装即可