electron入门实战

1、electron引入，使项目桌面化

（1）在有vue项目的情况下

vue ui // 默认打开一个8000端口的服务，一个可视化的UI界面就出来了

GUI.png

（2）选择左下角--vue项目管理器 -- 导入 -- 选择你需要打包成桌面应用的项目文件夹
（3）选择左侧菜单栏 任务--运行 --启动app

启动页.png

2、添加electron插件

（1）插件 -- 添加插件 搜索 vue-cli-plugin-electron-builder,安装第一个
（2）安装完成点击已安装插件-- 显示这个插件

3、运行

npm run electron:serve

运行之后会出现electron的桌面应用里面就是你的项目页面，都能正常点击使用。

运行成功.png

4、打包

进行打包成一个可执行的文件exe

npm run electron:build

报错如下：

打包报错.jpg

打包过程中会有一些不顺利，原因应该是electron的一些依赖需要从GitHub中下载，但是鉴于网络原因，下载很慢也下不下来，这时候建议科学上网（大家都懂梯梯和墙墙），这时候我去找了很多资料，有的建议我用cnpm淘宝镜像去安装这些依赖，当时觉得是个一劳永逸的操作，没有去用cnpm，至于能不能用不清楚，我看别人是成功的，后来我又发现有人使用的是将这些依赖在本地安装，一劳永逸，速度也很快，所以我采取了本地安装的方案，借鉴了这位大神的博客https://www.jianshu.com/p/5d8ea14ce374
安装包从https://registry.npmmirror.com/binary.html?path=electron-builder-binaries/nsis-3.0.4.1/这里下载

解决：

依赖1：下载 winCodeSign（https://npm.taobao.org/mirrors/electron-builder-binaries/winCodeSign-2.6.0/
解压放到C:\Users\Admin\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0目录下）
依赖2：下载nsis-3.0.4.1（https://npm.taobao.org/mirrors/electron-builder-binaries/nsis-3.0.4.1/
解压放到C:\Users\Admin\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1 目录下）
依赖3：下载nsis-resources-3.4.1 同上同名依赖
反正我是安装了以上3个依赖就可以成功打包。

5、打包之后双击exe就自动安装桌面应用快捷键

这时候出现了一些代码问题
（1）路由无法跳转
解决：mode用hash模式，不能用history模式，至于原因我没细看
（2）iconfont的小icon没法加载问题
还在调研
陆续更新中。。。