调试运行 electron 项目的几种姿势

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

全局安装electron框架

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

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

非全局安装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即可。
相关链接：

• https://newsn.net/say/mac-rootless-disable.html

方案二

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

npm install electron --unsafe-perm

相关链接：

• https://newsn.net/say/sudo-npm-install-permission.html

使用 electron命令启动项目

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

• 注意：普通的electron项目，是不需要下面的类似语句的。

cd my-project
node .electron-vue/build.js

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

electron ./

使用electron的ui界面启动项目

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

使用npm run dev启动目标代码

对于，我们提及的electron+vue的demo来说，启动的命令是：

npm run dev

而背后的命令是：

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

• https://newsn.net/say/electron-vue-build-command.html

特别提示

对于一个正常的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系列文章:

• https://newsn.net/tag/electron/

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