Electron环境配置

闲来无事,想弄个Electron demo玩玩,但是官网和网上写的方法很多都跑不通,研究了半下午后在此记录一下。
注:仅仅是配置到能跑通的环境

首先要有node环境

准备工作

npm安装Electron巨慢,而且很大的几率出现超时等问题,所以这里推荐使用cnpm全局安装Electron

//安装cnpm (如果已安装cnpm可以跳过这一步)
npm install -g cnpm --registry=https://registry.npm.taobao.org

//全局安装Electron 
cnpm install -g electron

注意:在Linux开发环境下执行Electron安装命令可能需要考虑一下权限问题(看到有的大佬提到了这一点,然而我在windows中并没有遇到什么权限问题)

全局安装打包工具,如果不需要打包成EXE可以忽略这一步(应该没人会不想打包吧)

cnpm install electron-packager -g

最快速的方法

通过官方github的demo可以获得一个Electron的脚手架,可以省去手动编写main.js和package.json的麻烦

//下载源代码到本地
git clone https://github.com/electron/electron-quick-start

//跳转到项目目录
cd electron-quick-start

//安装依赖
npm install

之后删除掉demo项目中的index.html,将自己的项目拷贝进来(一般来说都是vue项目吧)
如果你的项目首页不是index.html,需要在main.js修改入口文件

mainWindow.loadFile('index.html') //将index.html改为你的首页文件

之后输入以下命令,就可以运行本地项目了

electron .

打包EXE

打包exe命令

electron-packager .

如果vue项目打包后不能正确加载js和css的话还需要将项目的资源路径改为相对路径,修改后需要重新build
vue项目在脚手架 /config/index.js 中,将build下的assetsPublicPath 改为 ./
uniapp项目的话就是/manifest.json->h5配置->运行的基础路径改为 ./


结语:目前来说已经达到可以跑起来的地步了,剩下的接着学习吧O(∩_∩)O

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容