vue-cli 项目改造为桌面客户端

1. 安装 vue-cli-plugin-electron-builder
执行命令 vue add electron-builder
遇到的问题

electron安装失败

fail

如图,安装electron,一直卡在这里不动,很久也下不来。打开electron包一看,已经在了,索性直接运行试试。于是,执行yarn electron:serve命令。报错了,没有安装成功。

yarn electron:serve

看了Electron failed to install correctly, please delete node_modules/electron and try installing again这个说是少文件。

解决办法

换淘宝镜像源,安装成功。


success
2. 执行yarn electron:serve,运行正常
3. 执行yarn electron builder,打包为桌面客户端
遇到的问题

build失败,缺少包

build失败

解决办法

网络不好,多试几次就成功了。build成功会生成dist_electron文件夹

dist_electron

4. 双击win-unpacked文件夹里的exe文件,免安装运行桌面客户端
5. 遇到的问题及解决办法
  • 首页白屏
    routerhistory 模式换为hash 模式。
  • 首页黑屏
    由于首页是个MP4文件,就在想是不是不支持播放,查了下官网 handling-static-assets,果然是video的问题,需要设置stream: true
    video
  • 后台接口请求失败
    由于是web项目,就在想是不是跨域的问题,一验证果然是。需要在BrowserWindow中加上webSecurity:false
win = new BrowserWindow({
     // 全屏
    fullscreen: true,
    // 屏蔽边框
    frame: false,
    // 屏蔽菜单
    menu: null,
    webPreferences: {webSecurity: false},
  })

详细解释见在electron中实现跨域请求,无需更改服务器端设置

  • The URL protocol of the current origin (‘app://.‘) is not supported
    好奇心驱使还想看看有没有别的错误,就在build的时候加了openDevTools,结果就发现了这个错误。
    main.js 中注释掉registerServiceWorker就可以了。
    registerServiceWorker

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):