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

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

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

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

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

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

mac系统可能会遇到的问题

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

csrutil disbale

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

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

使用 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

使用npm run dev启动目标代码

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

npm run dev

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

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

总结

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

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