Electron-vue开发实战之Electron入门

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

前言

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

项目定档

做个什么项目呢,一开始想的是做个 待办事项 ,但是觉得太简单了。那就加个 影视播放器 ,将 待办事项 转变为 待看影视 ,目前就是这样一个项目。需求也简单,如下:

  • 可通过搜索片名检索资源
  • 手动添加想看的影片到 待看影视
  • 播放完一个影视进行匹配 待看影视

    • 如果存在就完成一个事项
    • 不存在就自动添加一个完成事项
  • 结合vip影视API可搜索各大影视网站的最新VIP资源

技术选型

  • Electron
  • Vue
  • Electron-vue

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 上才搜到一个对应的 issueshttps://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 基本上是没有。搜索到一个 issueshttps://github.com/SimulatedG...

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开发实战

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章