利用electron和electron-builder把前端web项目生成桌面程序

关于electron，有兴趣的可以百度了解一下。
为什么要写这篇文章呢？
因为百度到的相关教程几乎也是作者摸索出来，只知道怎么做，却没具体说为什么这样，而且没有总结，还到处是坑。

我的方法就是自动化：自动选择安装electron和electron-builder的版本。而不是像他们那样，自己做教程的时候是某个版本，但是到了你按他思路做，安装的确实另外的版本，给你留下很多坑。

先做一下总结：
1 设置好用到的插件的淘宝镜像
2 搭建electron项目（index.html，main.js，package.json）
3 安装electronhe 和electron-builder环境（注意一下：安装的时候别改写你的package.json，避免到时候打包程序的时候会把环境打包进去，造成打包后的项目太大）
4 cmd下运行预览和打包脚本。（我个人设置的是npm run view 和npm run build，具体按照自己的喜好在package.json下设置）

设置淘宝镜像

1 确定自己电脑安装有npm（或者cnpm或者yarn）
2 设置npm镜像（因为打包过程中会下载插件安装，如果没有设置镜像，直接从gihub下载，几乎会卡死）
3 cmd下运行：

npm config edit

把一下两行代码复制，粘贴，保存。保存后关闭即可

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

建立electron工程文件

1 main.js

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const Menu = electron.Menu
const path = require('path')
if (process.mas) app.setName('Your Electron App Name')

let mainWindow

function createWindow () {
  let windowOptions = {
    width: 1220,
    height: 780,
    minWidth: 1220,
    minHeight: 780,
    title: app.getName()
  }

  if (process.platform === 'linux') {
    windowOptions.icon = path.join(__dirname, '/dist/icon.ico')
  }

  mainWindow = new BrowserWindow(windowOptions)
  mainWindow.loadURL(path.join('file://', __dirname, '/dist/index.html'))

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', function () {
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu) // 设置菜单部分
  createWindow()
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

app.on('browser-window-created', function () {
  let reopenMenuItem = findReopenMenuItem()
  if (reopenMenuItem) reopenMenuItem.enabled = false
})

app.on('window-all-closed', function () {
  let reopenMenuItem = findReopenMenuItem()
  if (reopenMenuItem) reopenMenuItem.enabled = true
  app.quit()
})

/**
 * 注册键盘快捷键
 * 其中：label: '切换开发者工具',这个可以在发布时注释掉
 */
let template = [
  {
    label: 'Edit ( 操作 )',
    submenu: [{
      label: 'Copy ( 复制 )',
      accelerator: 'CmdOrCtrl+C',
      role: 'copy'
    }, {
      label: 'Paste ( 粘贴 )',
      accelerator: 'CmdOrCtrl+V',
      role: 'paste'
    }, {
      label: 'Reload ( 重新加载 )',
      accelerator: 'CmdOrCtrl+R',
      click: function (item, focusedWindow) {
        if (focusedWindow) {
          // on reload, start fresh and close any old
          // open secondary windows
          if (focusedWindow.id === 1) {
            BrowserWindow.getAllWindows().forEach(function (win) {
              if (win.id > 1) {
                win.close()
              }
            })
          }
          focusedWindow.reload()
        }
      }
    }]
  },
  {
    label: 'Window ( 窗口 )',
    role: 'window',
    submenu: [{
      label: 'Minimize ( 最小化 )',
      accelerator: 'CmdOrCtrl+M',
      role: 'minimize'
    }, {
      label: 'Close ( 关闭 )',
      accelerator: 'CmdOrCtrl+W',
      role: 'close'
    }, {
      label: '切换开发者工具',
      accelerator: (function () {
        if (process.platform === 'darwin') {
          return 'Alt+Command+I'
        } else {
          return 'Ctrl+Shift+I'
        }
      })(),
      click: function (item, focusedWindow) {
        if (focusedWindow) {
          focusedWindow.toggleDevTools()
        }
      }
    }, {
      type: 'separator'
    }]
  },
  {
    label: 'Help ( 帮助 ) ',
    role: 'help',
    submenu: [{
      label: 'FeedBack ( 意见反馈 )',
      click: function () {
        electron.shell.openExternal('https://forum.iptchain.net')
      }
    }]
  }
]

/**
 * 增加更新相关的菜单选项
 */
function addUpdateMenuItems (items, position) {
  if (process.mas) return

  const version = electron.app.getVersion()
  let updateItems = [{
    label: `Version ${version}`,
    enabled: false
  }, {
    label: 'Checking for Update',
    enabled: false,
    key: 'checkingForUpdate'
  }, {
    label: 'Check for Update',
    visible: false,
    key: 'checkForUpdate',
    click: function () {
      require('electron').autoUpdater.checkForUpdates()
    }
  }, {
    label: 'Restart and Install Update',
    enabled: true,
    visible: false,
    key: 'restartToUpdate',
    click: function () {
      require('electron').autoUpdater.quitAndInstall()
    }
  }]

  items.splice.apply(items, [position, 0].concat(updateItems))
}

function findReopenMenuItem () {
  const menu = Menu.getApplicationMenu()
  if (!menu) return

  let reopenMenuItem
  menu.items.forEach(function (item) {
    if (item.submenu) {
      item.submenu.items.forEach(function (item) {
        if (item.key === 'reopenMenuItem') {
          reopenMenuItem = item
        }
      })
    }
  })
  return reopenMenuItem
}

// 针对Mac端的一些配置
if (process.platform === 'darwin') {
  const name = electron.app.getName()
  template.unshift({
    label: name,
    submenu: [{
      label: 'Quit ( 退出 )',
      accelerator: 'Command+Q',
      click: function () {
        app.quit()
      }
    }]
  })

  // Window menu.
  template[3].submenu.push({
    type: 'separator'
  }, {
    label: 'Bring All to Front',
    role: 'front'
  })

  addUpdateMenuItems(template[0].submenu, 1)
}

// 针对Windows端的一些配置
if (process.platform === 'win32') {
  const helpMenu = template[template.length - 1].submenu
  addUpdateMenuItems(helpMenu, 0)
}

代码解析：

设置桌面程序的app图标

设置项目路径和入口index.html（我的项目是放在dist文件夹下，vue编译生成后，整个文件夹直接复制进来，就是我们的网页项目全部文件）

2 package.json

{
	"name": "apiadmin",
	"version": "4.0.0",
	"author": "zhaoxiang <[e-mail]>",
	"private": false,
	"scripts": {
		"view": "electron .",
		"build": "electron-builder"
	},
	"main": "main.js",
	"build": {
		"appId": "com.wss.app",
		"directories": {
			"output": "builder"
		},
		"win": {
			"target": [
				"nsis",
				"zip"
			]
		},
		"files": [
			"dist/**/*",
			"main.js"
		]
	}
}

代码解析

注意：如果这个package.json是用你的vue项目下的同名文件改的
务必、务必、务必删掉依赖：dependencies 和 devDependencies ，否则打包出来的程序会很大，这些vue项目环境模块不需要打包进来。

3 index.html

我直接放在dist文件夹下，可以看我的截图，理解目录，和package.json 和main.js的相关设置

安装依赖

安装electron

cnpm install electron

安装electron-builder

cnpm install electron-builder

千万别手贱运行以下代码，否者会改写package.json文件，加入依赖，打包程序的时候会打包进去的。如果加入了，务必删掉

cnpm install electron --save--dev
cnpm install electron-builder --save--dev

预览electron项目

npm run view

成功：

打包electron项目

npm run build

住：打包过程中会下载安装一些必要插件并自动全局安装好。如果第一步没有设置镜像，会卡死，别人说的方法都是手动下载安装，并给出下载链接，然后解压到固定文件夹，很麻烦，而且他给出的版本不一定是你你安装的electron-builder需要的版本。我在这里走过很多坑。

打包成功后结果：

直接运行 builder\win-unpacked下的apiadmin.exe 就可以了，打包整个文件夹发给别人即可。
（其中builder目录是在package.json设置的输出目录）

或者：发送builder下的apiadmin Setup 4.0.0.exe给他人装即可