乐趣区

Electronvue开发实战之Electron入门

jiezi

原文首发于我的博客，欢迎点击查看获得更好的阅读体验~

前言

最近想学点新东西，对桌面端有些兴趣，就想学学Electron，想一个新的东西就得有一个项目作为实战基础，这样才有学习的动力与目标。

Electron 简要介绍

见：Electron 简要介绍

Electron-vue 简要介绍

见：Electron-vue 简要介绍

项目搭建

# 如果你没有 vue-cli 的话需要全局安装
npm install -g vue-cli
# 然后使用 vue-cli 来安装 electron-vue 的模板
vue init simulatedgreg/electron-vue my-project

# 安装依赖
cd my-project
npm install # or yarn
# 进入开发模式
npm run dev # or yarn run dev

如果你是 windows 用户，在安装期间遇到了关于node-gyp、C++ 库等方面的问题的话，请参考官方文档给出的解决办法。

如果上述都没有问题，那么你将会看到如下界面：

过五关斩六将

以上为理想状态，让我们看看现实是如何的残酷。

背景

因为一些原因在前段时间将 Nodejs 版本从 v8.3.0 升级到稳定版本 v10.16.0。稳定版嘛，以为一切正常，然后npm install 老项目的时候 node-sass 安装不上，最后就把 Nodejs 升级到了 v12.3.1 的开发版，最后就一切正常了。

以下是在如下环境下进行的操作：

  • 科学上网
  • nodejs v12.3.1
  • npm 忘记记录了
  • windows 10 专业版

踩坑开始

首先看一下，我 npm install 所遇到的错误：

原文链接

经分析发现，某些版本下，chromedriver 的 zip 文件 url 的响应是 302 跳转，而在 install.js 里使用的是 Node.js 内置的 http 对象的 get 方法无法处理 302 跳转的情况；而在另外一些情况下，则是因为 googleapis.com 被墙了，此时即使采用科学上网的方法也仍然无法获取文件。

无论是上述哪种情况，可以使用下面的命令安装：(使用 cnpm 安装亦可)

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

然后以为一切正常，就 npm run dev，结果可想而知，在运行日志中报错了。错误日志忘记截图保存了，大概意思提示就是electron 没有正确安装，需要删除 node_modules 文件夹重新 npm install。哦霍~ 那就再来呗，然并卵。最后想到也可能和安装chromedriver 一样的问题，所以就找到了下在的命令安装：

npm install electron --electron_mirror=https://npm.taobao.org/mirrors/electron/

好的，大功告成，再次npm run dev，哇哇哇 …，终于看到界面了。

ERROR in Template execution failed: ReferenceError: process is not defined

emmm… 这是什么情况，一开始以为又是什么包没有安装好，一顿瞎操作过后它还是无动于衷。最后是在 google 上才搜到一个对应的issues：https://github.com/agalwood/M…

我今天也遇到，谷歌了很久，终于解决了，技术把 node 12.4 开发版还原到 10.16 稳定版 然后删除 node_modules 再 install 就可以了

也是唯一一个比较有效的解决方案，然后就卸载了 v12.3.1 的版本，重新安装了 v10.16.0 的稳定版。没有任何意外的再次遇到了 node-sass 安装问题。

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.12.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.12.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这种问题现在解决起来得心应手，依然使用淘宝镜像：

npm install node-sass –sass-binary-site=http://npm.taobao.org/mirrors/node-sass

再再次npm run dev，完美，总算是看到了一个完整的界面。如下：

但是，我注意到日志中报错了。emmm…

┏ Electron -------------------

  [11000:0615/095124.922:ERROR:CONSOLE(7574)] "Extension server error: Object not found: <top>", source: chrome-devtools://devtools/bundled/inspector.js (7574)
  
┗ ----------------------------

这里需要表扬一下 google，对于Github 上项目的 issues 的搜集 baidu 基本上是没有。搜索到一个issues：https://github.com/SimulatedG…

So, to summarize

In main/index.dev.js:

- require('electron-debug')({showDevTools: true});
+ // NB: Don't open dev tools with this, it is causing the error
+ require('electron-debug')();

In main/index.js in the createWindow() function:

mainWindow.loadURL(winURL);

+  // Open dev tools initially when in development mode
+  if (process.env.NODE_ENV === "development") {+    mainWindow.webContents.on("did-frame-finish-load", () => {+      mainWindow.webContents.once("devtools-opened", () => {+        mainWindow.focus();
+      });
+      mainWindow.webContents.openDevTools();
+    });
+  }

问题的根本原因也没有去深究了，估计就是一些版本问题。

说明：代码中前面的 + 与 - 是 github 上代码对版本更新的提示，+代表新增代码行，-代表删除代码行。blog 中的 code 块没有对应样式，所以实际代码中不需要添加前面的 + 与 -。

总结

一波 N 折过后，换来的就是解决问题的思路以及经验，然后技术问题还是得在 google 搜呀。感叹~
上面所说的是遇到问题后找到的解决方法，下面总结一下 npm install 时的顺序：

// 安装 node-sass
npm install node-sass –sass-binary-site=http://npm.taobao.org/mirrors/node-sass
// 安装 chromedriver
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
// 安装 electron
npm install electron --electron_mirror=https://npm.taobao.org/mirrors/electron/
// 安装其它包
npm install

以及各种版本：

  • nodejs v10.16.0
  • npm v6.9.0
  • windows 10 专业版

另外或许直接使用 cnpm 就不会有这些头疼的问题了。

参考文档

Electron-vue 开发实战

退出移动版