electron-searchMovies

以前學了electron,前段時間又學了一下vue,爲了增長熟練度決定將二者結合作個有趣的東西.想來想去最後決定將原來用 PyQt 寫的MovieHeavens從新寫一遍,使用electron-vue構建的項目地址electron-searchMovies,最後用electron-packager打包了成exe,在項目主頁的releases能夠找到打包後的安裝程序.總結一下整個問題中碰見的幾點問題以及解決辦法.

沒法下載打包所需的工具

因爲一些神奇的力量致使打包過程當中下載必需的工具包失敗

解決辦法

肯定你須要工具包的名稱,而後先手動將這些工具包下載下來,而後解壓到對應的緩存目錄中.各個系統對應的路徑以下

macOS: ~/Library/Caches/electron-builder
Linux: ~/.cache/electron-builder
windows: %LOCALAPPDATA%\electron-builder\cache

個人最終目錄樹以下:

.
├── appimage-packages
│   └── appimage-packages-28-08-17
├── nsis
│   └── nsis-3.0.1.13
├── nsis-resources
│   └── nsis-resources-3.3.0
└── winCodeSign
    └── winCodeSign-1.9.0

用 yarn 而不是 npm

當解決了工具包的問題,仍然打包成功,可是應用沒有任何內容只是一個空白頁,後來在githubNo contents only a blank page after build看見建議用 yarn 而不是 npm.這裏有一篇Yarn vs npm: Everything You Need to Know的詳細文章,正如官方文檔說道的:yarn是爲了彌補npm的一些缺陷而出現的.

短暫的空白頁

一切問題都解決了,再次將軟件打包成 exe,彷佛接下來就是體驗勝利的果實了,可是事實上並非這樣,打包的第一個版本Pre-release,在打開軟件最開始會出現短暫的空白頁,顯然這對用戶不是一個很棒的體驗,最後決定加了一個簡單的加載動畫,核心代碼以下:

mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.show()
    if (loadingScreen) {
      let loadingScreenBounds = loadingScreen.getBounds()
      mainWindow.setBounds(loadingScreenBounds)
      loadingScreen.close()
    }
  })

完整代碼天然就須要去electron-searchMovies上查看了.這裏碰見了一個新的問題.

Cannot Get Route

在解決上個問題的同時碰見了一個新的問題,加載動畫頁是經過路由映射的，我在 src/routes.js 中添加了以下的路由:

{
      path: '/loading',
      name: 'loading-page',
      component: require('@/components/LoadingPage')
    }

而後讓 loadingScreen 加載 http://localhost:9080/loading 可是卻使用得到 cannot get /loading 的錯誤,後來最後查找資料下找到了解決方案,對於新的路由訪問地址應該是http://localhost:9080/#/new_route,打包後的訪問地址應該是:*file://${__dirname}/index.html#new_route*,到此全部問題圓滿解決.最後上一下軟件的使用截圖.

使用

最後歡迎你們star Or fork~