Electron-vue开发实战之Electron入门

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

前言

最近想学点新东西,对桌面端有些兴趣,就想学学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上才搜到一个对应的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...

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

你可能感兴趣的

载入中...