前段时间摸鱼太多，闲的把正在做的vue+element的后台项目转成了桌面应用。
我用的是微软的electron框架，就是vscode用的那个。
桌面开发的框架很多，因为我是做前端的，从这个入手还是比较简单的*只要会HTML与JS就可以上手了*
这个东西还是很好玩的，就是打包时间有点长...
electron简介
官方网站
https://www.electronjs.org/electron是微软在GitHub上开源框架
https://github.com/electron（5w+ star），electron是基于Chromium 和 Node.js 来构建一个跨平台应用的（Mac，Windows，和Linux）。-
Chromium是一个开源浏览器，与chrome区别是不会自动更新，但是一些新特性貌似会在Chromium先上。
我的理解就是他就是一个js控制的被打包了的精简版的谷歌浏览器
多进程
Chromium是多进程的，每一个页面都是一个独立的渲染进程，每一个页面就是一个窗口，你可以理解成浏览器的tab
任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。
主进程
整体控制
全局快捷键
屏幕
窗口
菜单项
系统托盘
从主进程到渲染进程的异步通信
创建和控制视图
等等
渲染进程
页面渲染
webview标签
渲染进程与主进程通信
从渲染进程到主进程的异步通信
子窗口
捕获桌面资源
进程间的关系
主进程通过构造BrowserWindow实例来创建页面。每个 BrowserWindow实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
Web页面因为安全限制，不能直接访问原生的GUI资源，Electron也一样，渲染进程如果想要进行原生的GUI操作，必须和主进程通信，请求相应的GUI操作。
vue项目转exe
开始正题
步骤
git clone [https://github.com/electron/electron-quick-](https://github.com/electron/electron-quick-)**start**
cd electron-**quick**-**start**
cnpm **install**
-
打包要转成桌面端的vue项目 本项目是基于vue-element-admin架构的后台管理系统 这个地方有个坑是要把auth.js里面存储token的方式换成localstorage方式 否则cnpm start之后登录页是不会跳转的，因为electron应用会有两个进程，一个浏览器一个node，在node里自然获取不到浏览器的cookie 需要靠electron提供的api来进行通信 所以这块直接用localStorage方式了****打包的地方还一个坑就是 静态资源文件路径要变成./ 否则会出现白屏问题
image.png
-
删除掉原index.html 把打包好的dist放在main.js同级目录然后引入
image.png cnpm start 运行
打包
打包有很多种方法 插件很多
我用的是electron-packager
cnpm install electron-packager --save-dev
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
}
命令说明：
* location of project：项目所在路径
* name of project：打包的项目名字
* platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
* architecture：决定了使用 x86 还是 x64 还是两个架构都用
* electron version：electron 的版本
* optional options：可选选项```
```npm run packager```
打包时间挺长的 要耐心等待一下
在App-win32-x64文件夹下可以找到App.exe
