Electron + 新VueCli 初探

2020-08-25
最近在翻看NodeJS文档时发现了Electron

先来记下踩过的几个坑：
以下所说的可以执行Node模块都是指可在渲染进程中可执行的
期间所用到的框架与工具等（Electron 9.2.1，Vue 2.6.10， @vue/cli 4.4.6）都是至今的最新版

• 新版的Electron中需要打开nodeIntegration: true 属性 在渲染进程中的<script>中才可以引入Node模块,否则只能通过预加载属性（preload）引入的js文件才能用Node；
• Vue不管生产环境 还是 开发环境 在webpack config中加入target: 'electron-renderer' 这样当Electron loadURL 或者 loadFile都可以直接执行Node模块，具体原因还未深究，就当前了解 觉得是 加入target: 'electron-renderer'后 webpack不对Electron做混淆了，这样做有些问题请看下一条；
• 不能使用前端中的clipboard框架，这样会在dev环境报错；build不会；原因是Electron中也含有 clipboard 模块，命名冲突；初步估计是 build对前端框架代码混淆了，而对Electron没有；

解决了以上三个问题 基本就可以使用Vue做UI来实现Electron桌面应用程序了；
找了太多文章，也不记得了。感谢最终这篇文章的末尾道出关键；
Webpack如何构建Electron应用

刚刚说到的clipboard 可以放弃前端的那个，直接使用Electron自带的(可直接在渲染进程中使用)，更加强大；

以下是采坑经历，可选择浏览

最近在翻看NodeJS文档时发现了Electron，起初觉得我好像一直再找这个（文章末尾细说）。今天终于被我找到了。会前端就能开发APP了。（虽然我是做iOS开发的，程序无言界嘛~哈哈）

• 马上着手研究，看文档，写demo。然后发现，并没有那么爽。
  首先是区分主进程，与渲染进程，起初感觉自己理解的挺对，结果官方下载的demo与他们的文档大相径庭。。。为什么我在渲染进程写的代买都报错呢？百思不得其解，后来发现另一个electron-api-demo才知道 Electron新版默认是在渲染进程禁止Node的（就因为这个配置折腾了好久 后来找到专门介绍所有配置的文档 挨个看了一遍！）；
• 渲染进程的问题解决完了 ，就该结合Vue了，结果继续扑街。
  为了好区分 我并没有把文件都混到一起 而是分别建立了 Vue工程 和 Electron工程 分别测试 用Electron中loadURL加载 Vue server的url 用Electron中loadFile加载Vue build后的dist/index.html 的绝对地址；
  不管server 还是build都报错。。某些文件方法未找到，继续各种尝试，改名了解import 与 request的区别等等 都不行，然后继续百度。。
  很多文章都是重复的，或者干脆就是官方文档扒的，最后找到了一篇修改webpack配置的文章，就是添加 target: 'electron-renderer'；
  再往后就是发现虽然在Vue build后代码可以执行，但是在 Vue server环境中还是报错，这可不利于开发调试。仔细一看报错就是我的工程中使用了 clipboard，删除后即可正常运行；

写在最后：
我为什么说我一直再找这个（Electron），是因为之前帮girlfriend写了一个工具页面，是通过phpstudy在本地开启服务加代理api接口，算是半个桌面应用了吧（Chrome可以设置，将网页单独窗口，单独启动icon，特像桌面应用）。
当时就萌生了搞一个这样的桌面应用，后来是有了新需求，需要用到selenium，正好会点Python，就想用django搭建一个后台，然后用前端页面 通过一些方式（当时想了 发请求 或者 websockt）去告诉Python去触发一些系统级的api和调用selenium控制浏览器；最后还是没成，发现这么做很重，websockt还不好保活（因为selenium用的不熟，还是菜鸟，经常会报错，websockt就下线了。。），我总不能再去下载保活的工具包程序吧。功能没多少，软甲下载一堆了。
然后就发现Electron了。
过几天整理一下 ，我再发一个完成demo