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. 遇到的问题及解决办法

• 首页白屏
  router 由history 模式换为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