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~