electron入门实战

2022-11-11  本文已影响0人  有一个程序媛

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没法加载问题
还在调研
陆续更新中。。。

上一篇 下一篇

猜你喜欢

热点阅读