项目创建及打包
- 全局安装vue/cli
npm install -g @vue/cli
# or
yarn global add @vue/cli
-
创建vue项目
vue create my_electron_project -
安装electron
vue add --dev electron -
安装项目打包工具
vue add electron-builder -
启动项目
npm run electron:server -
项目打包
npm run electron:server
注：项目启动打包命令可以看package.json文件并可以自定义命令名；
创建nginx代理服务器
安装nginx
参考文档： juejin.cn/post/710378…
nginx服务器常用命令
start nginx # 启动nginx
nginx -h # 打开帮助
nginx -t # 检查配置文件是否正确
# 以下命令均要先启动nginx才能执行
nginx -s stop # 快速停止
nginx -s quit # 完整有序的关闭
nginx -s reopen # 重新启动（注意不会重新读取配置文件）
nginx -s reload # 重新读取配置文件
tasklist /fi "imagename eq nginx.exe" # 查看任务进程是否存在
项目打包部署
使用electron-updater检测更新
-
为了之后在服务器上可以进行自动更新，使用electron-updater进行检测更新：
npm install electron-updater -
在vue.config.js中进行配置
- 打包:
npm run electron:build,打包文件在dist_electron文件目录下
部署到nginx搭建的服务器
在下载好的nginx中conf/nginx.conf文件下查看服务的端口和域名，builder-effective-config.yaml，electron_vue_test Setup 0.1.10.exe，latest.yml ，三个文件夹放到nginx指定的目录文件中，在我这里就是放到html文件中
- 然后通过双击
electron_vue_test Setup 0.1.10.exe文件安装客户端就可以使得程序运行在nginx创建的服务中
自动更新流程
当我们把electron项目部署到服务器中之后，通过latest.yml 中version版本的对比，通知客户端有新版本是否进行更新；版本号通过更改package.json中的version字段。
electron-packager中的autoUpdater函数进行版本更新监听
我实现了一个简单的更新监听功能，代码如下
更多关于autoUpdater函数的使用可以参考：juejin.cn/post/684490…
结束语
这是对electron初次学习的经验总结，其中有错误的地方请指正，谢谢！
