记录这个笔记前，先总结下为什么要把网页端管理系统转为电脑桌面程序呢？
分为两点：
1、在如今，我们打开一个网页端管理系统，先要打开浏览器，如没有收藏网址的情况下还需要输入网址，然后再去登录，使用者还可能会出现忘记网址的情况。那么，转为电脑桌面程序，使用者可以使用桌面端的快捷方式打开程序即可办公，再也没有记不住网址的烦恼。
2、电脑桌面程序的Windows平台一般是C++开发，一个顶尖的C++人才比较难得，开发成本高。是否有另外一种解决方案呢？有的，即是利用当今前端的Electron-builder，使用Electron-builder把macOS、Windows 和 Linux等用于打包和构建可分发 Electron 应用程序，还可以用浏览器的调试工具调试。
更多详情原理请去Electron-builder的官网：www.electron.build/
下方是它的一些支持和构建，详情可去它的官网查看
现在我们来记录如何利用Electron-builder把网页端管理系统转为电脑桌面程序吧，分为三步：安装、配置、启动和打包
本人使用的环境：Node(14.17.5)、Npm(6.14.14)、Vue-Cli(4.5.15)、Vue(2.6+ ~ 3.0-)、Yarn(1.22.11) 当然还有一些UI框架、常用组件这些不会影响到编译、数据存储等等的就不例举了。
一、安装 打开项目，确保项目里有依赖的情况下，执行安装Electron-builder命令：
yarn add electron-builder --dev
我下载的版本是13.0.0，其它版本未下载，有其它问题未知。
安装好以后，package.json有Electron-builder相关的信息，src文件夹里面有一个background.js，这是它的配置文件 （注：使用npm安装也可以，我这边是没报错的。。。）
二、配置
在这个文件可以修改桌面程序的相关配置，例如：桌面程序的icon、宽高等等（宽高默认是800 * 600）
三、启动和打包
启动命令：
yarn run electron:serve
启动会同时启动网页端和桌面程序端，桌面程序端启动会比较缓慢，这是因为 background.js 里会打开vue devtools， 可以把 await installExtension(VUEJS_DEVTOOLS) 这一句代码注释掉，再重新启动就会比较快的启动起来了。
打包命令：
yarn run electron:build
打包好后，项目根目录会出现名为dist_electron的文件夹，里面包含打包好后的网页端和桌面程序，我这边的桌面程序是dist_electron文件夹下的win-unpacked，打开win-unpacked文件夹，里面有一个xxxx.exe的程序，双击它便会打开想要的桌面程序了。（非常感谢若依系统给我用做示范）
记录打包完毕，由于时间问题，先记录遇到未解决的问题，等有空再去一一解决！
1、未打包成安装包。 2、如何更新版本。 3、许久不打开，路由重定向需要重新配置。 4、如何添加桌面程序的图标。
