@Electron+vue打包桌面跨平台软件

Electron+vue打包桌面跨平台软件

废话不多说,直接操作。

一、实现原理

使用Vue开发项目时,可顺便开发桌面软件,方便用户操作,还可与调用底层API,开发更cool项目

三、使用方法

1.更改淘宝镜像
C盘===>user=====>shI======>.npmrc
更改后面两行代码
electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/
2.进入创好的vue项目下
npm add electron-builder使用electron

选择版本9最新稳定版本
3.测试启动项目
npm run electron:serve 启动项目(时间较长,等待一会)

4.打包成桌面软件
npm run electron:build 打包完成后项目下会生成一个dist_electron文件

四、优点和缺点

优点：跨平台、无开发成本、vue网页即可打包
缺点:打包后体积较大、性能一般

打包后的app还有一个BUG 小编正在解决当中 缺少路由 有大神路过可以指点一下如果您打开是空白,看一下自己的vue-config.js这的配置改成’/’

打包后路由改为hash模式,但是小编没有启动成功,离成功只差一步 加油加油!!!

解决方案

将项目下background.js直接托管远程项目,可实现路由跳转BUG