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

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

准备工作之全局安装electron框架

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

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

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

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

mac系统可能会遇到的问题

在全局安装electron的时候,如果你的系统是mac,并且使用了sudo,还出现权限错误。这个时候,你需要关闭rootless功能。方法是,重启电脑,command+r,输入代码命令。

csrutil disbale

重启后,再执行全局安装electron即可。

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

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

使用 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,然后把我们的目标项目,拖动到默认对话框的下方区域。即可启动另外一个目标项目窗口。
调试运行electron项目的几种姿势 - drag_start

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

使用npm run dev启动目标代码

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

npm run dev

而背后的命令是:
调试运行electron项目的几种姿势 - npm_run_dev

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

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

总结

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

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

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/electron-run.html
上一篇好文:开发electron程序的npm准备工作
下一篇好文:mac环境,利用builder构建electron+vue的demo

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~