共计 1655 个字符，预计需要花费 5 分钟才能阅读完成。
用过好几个 Hosts 切换工具，但总是有点这样那样的问题。最讨厌的莫过于切换完后，键盘都快按坏了，浏览器里面的 Hosts 就是不变，网上找了好多方法，但是感觉都并不完美，于是就有了这篇文章
Electron
说起桌面应用，以前一直想开发个跨平台的应用，学习了一下 Qt，偷了一些 QQ 的素材，整了个简单的 IM，但是迫于 C ++ 基本属于语法入门阶段，写个东西是真费劲。。。
最近几年 Electron 忽然火了起来，也诞生了很多好用的应用。Electron 本身是基于 Chromium 和 Node.js，让你可以使用 HTML, CSS 和 JavaScript 构建应用。简单来说就是浏览器的壳子，里面套 HTML 页面，但是拥有了浏览器之外的能力。作为 PHP 程序员，肯定会点 JavaScript，也可以假装会点 Node.js 吧
使用了各种第三方库
electron-vue
Electron 文档大概看了一下，不知道如何下手，然后找到了 electron-vue，几行命令就可以帮你把项目初始化好了
Element-UI
饿了么出品，基于 Vue 的 UI 组件库
CodeMirror
代码编辑器插件神器，提供超级超级超级多的功能和配置
chrome-remote-interface
Chrome 调试协议的第三方调试客户端实现，为 node 程序提供了 api，想要在 Chrome 中实时生效的关键工具就是它
lowdb
名字虽然 low，但是很好用。一个本地储存的 JSON 数据库(其实就是自己懒得操作 JSON。。。)
坑来了
上面写了一大坨，基本全是介绍，下面才是我在开发过程中，遇到的问题，其实大部分都是自己学艺不精，没有想清楚造成的
主进程 && 渲染进程
Electron 应用同时使用了 main(主进程) 和一个或者多个 renderer(渲染进程) 来运行多个程序开发的时候并没有想太多，等某些功能实现的时候懵逼了，比如托盘的菜单 (main) 在切换 Hosts 的时候，页面 (renderer) 中的勾选状态需要同步更新。这个时候才看文档，发现人家提供了进程间的 ipc 通信方法，造成了代码逻辑的大量改动和结构优化，如果你的应用也有类似功能，开发之前一定要想清楚各种事件消息如何相互传递并且妥善管理。
不同的进程从数据库中获取到的数据不一致
看了 lowdb 半天文档，没整明白。不就是读文件么，都写成功 (同步方式) 了，别的进程就是读不出来呢？初步怀疑，数据在内存中存了一份儿 (同步机制不详)。忽然发现 lowdb 的一句介绍提到了 Lodash(我并不知道这是啥)，看了一下才明白 const db = low(adapter) 返回的是一个 Lodash 实例，只有当触发 write()和 read()的时候才真正的去操作文件，单进程的话没什么问题，但是多进程就好操作数据不一致了，解决方法就是在读取的时候先 read()一下：db.read().get(‘hosts’)，搞定。
目录不存在
当你兴奋的把应用传给同事，结果人家一打开，一个大大的报错 (一脸懵逼 + 尴尬)，原来是 app.getPath(‘userData’) 获取到的目录默认并不存在，在操作前加目录判断，没有就创建。
程序打包后，不能复制粘贴
网上查了一下，发现 Mac 程序内如果需要复制粘贴，需要加到菜单中，代码如下：
if (process.platform === ‘darwin’) {
const template = [
{
label: ‘ 我的应用名称 ’,
submenu: [
{
label: ‘ 退出 ’,
accelerator: ‘Command+Q’,
click: () => {
app.quit()
}
}
]
},
{
label: ‘ 编辑 ’,
submenu: [
{label: ‘ 复制 ’, accelerator: ‘CmdOrCtrl+C’, selector: ‘copy:’},
{label: ‘ 粘贴 ’, accelerator: ‘CmdOrCtrl+V’, selector: ‘paste:’}
]
}
]
Menu.setApplicationMenu(Menu.buildFromTemplate(template))
}
