vue-cli 項目改造爲桌面客戶端

1. 安裝 vue-cli-plugin-electron-builder

執行命令 vue add electron-builder

遇到的問題

electron安裝失敗

如圖，安裝electron，一直卡在這裏不動，很久也下不來。打開electron包一看，已經在了，索性直接運行試試。於是，執行yarn electron:serve命令。報錯了，沒有安裝成功。

看了Electron failed to install correctly, please delete node_modules/electron and try installing again這個說是少文件。

解決辦法

換淘寶鏡像源，安裝成功。

2. 執行yarn electron:serve，運行正常

3. 執行yarn electron builder，打包爲桌面客戶端

遇到的問題

build失敗，缺少包

解決辦法

網絡不好，多試幾次就成功了。build成功會生成dist_electron文件夾

4. 雙擊win-unpacked文件夾裏的exe文件,免安裝運行桌面客戶端

5. 遇到的問題及解決辦法

• 首頁白屏
  router 由history 模式換爲hash 模式。
• 首頁黑屏
  由於首頁是個MP4文件，就在想是不是不支持播放，查了下官網 handling-static-assets，果然是video的問題，需要設置stream: true。
  
• 後臺接口請求失敗
  由於是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就可以了。