在前面的文章中,苏南大叔已经和大家分享了:对electron+vue的demo进行构建的相关经验。在本文中,苏南大叔和大家分享的是:electron项目的调试经验。

全局安装electron框架

npm install electron -g
cnpm install electron -g 
yarn add global electron

任选一条语句,全局安装electron即可。安装完毕后,使用electron命令能够跳出默认对话框即可。

调试运行 electron 项目的几种姿势 - electron
调试运行 electron 项目的几种姿势(图3-1)

非全局安装electron框架

大多数情况下,大家适用的是全局的electron。但这个事情,并不是绝对的。有的时候,使用的electron是来自node_modules/目录下面的。

这条命令可以安装一个局部的electron

npm install electron --save-dev

调用的方式是:
win:

node_modules\.bin\electron.cmd ./

mac:

node_modules\.bin\electron ./

其中大多数情况下,后面的路径都是./,当然,特殊情况下,这个./会变成/dist/main.js之类的起始js文件。

mac系统可能会遇到的问题

在全局安装electron的时候,如果你的系统是mac,并且使用了sudo,还出现权限错误。

方案一

这个时候,你需要关闭rootless功能。方法是,重启电脑,command+r,输入代码命令。

csrutil disbale

重启后,再执行全局安装electron即可。
相关链接:

方案二

这个是推荐方案,更好一些。

npm install electron --unsafe-perm

相关链接:

使用 electron命令启动项目

因为使用electron启动的时候,起始js读取的是package.json里面的main值。所以,请保证这个js文件的正确性。对于我们提及的electron+vue项目的demo来说,main项对应的js是需要build之后才能生成的。所以,要先执行下面的语句。

  • 注意:普通的electron项目,是不需要下面的类似语句的。
cd my-project
node .electron-vue/build.js

启动目标demo项目,可以在在当前项目下,使用下述命令启动项目。

electron ./

使用electronui界面启动项目

console下,使用下述命令启动默认对话框gui,然后把我们的目标项目,拖动到默认对话框的下方区域。即可启动另外一个目标项目窗口。

调试运行 electron 项目的几种姿势 - drag_start
调试运行 electron 项目的几种姿势(图3-2)

使用npm run dev启动目标代码

对于,我们提及的electron+vuedemo来说,启动的命令是:

npm run dev

而背后的命令是:

调试运行 electron 项目的几种姿势 - npm_run_dev
调试运行 electron 项目的几种姿势(图3-3)

这种情况下,启动的是开发模式。并非dist模式,所以并不需要额外执行上述步骤中的build.js

特别提示

对于一个正常的electron程序来说,开发者在开发过程中,很有可能会碰到三个版本的electron。而这三个不同的electron之间肯定存在着版本差异,导致一些不可思议的事情发生。那么,很多小白也掉坑掉在这里。所以,请各位小白,仔细想想自己到底用的是哪个electron,整个开发周期内的electron版本是否一致。

  • 全局的electron,一般是普通的调试模式下用electron .这个命令用到的。
  • 局部的electron,一般位于node_modules/.bin/下面。用vscode调试或者npm run xxx调试时,比较可能用到的时这个版本的electron
  • 打包时的electron,因为无论是electron-packager还是electron-builder。都是可以单独指定electron的版本号的。那么,结果很有可能就会导致,指定的版本号和调试的版本号是不一致的。

https://newsn.net/say/electron-packager-control-version.html

总结

当然,如果electron项目最终build成可执行文件之后,双击即可,是并不需要上述这些不同姿势的。
欢迎继续关注苏南大叔的electron系列文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章:

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!