闲来无事,想弄个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