之前学了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~

electron-searchMovies的更多相关文章

  1. Electron使用与学习--(页面间的通信)

    目录结构: index.js是主进程js. const electron = require('electron') const app = electron.app const BrowserWin ...

  2. Electron使用与学习--(基本使用与菜单操作)

    对于electron是个新手,下面纯属个人理解.如有错误,欢迎指出.   一.安装 如果你本地按照github上的 # Install the `electron` command globally ...

  3. Electron 不完全快速手册

    Electron能干嘛 Vscode 基于Electron开发的,他是用来开发桌面软件的,可以轻易的跨平台 他的前身是atomshell,图标很丑,不用在意,一点也不像vscode也不用在意.   L ...

  4. Electron中Jquery的引入方式

    原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...

  5. Electron的环境配置

    原文地址http://huisky.com/blog/161218121551123 本文介绍了Electron的环境配置,包括Electron下载.nodejs下载安装.NPM+Bower安装配置. ...

  6. Electron安装

    1.安装nodejs和npm 官网下载地址:https://nodejs.org/en/download/ 安装包:下载.msi 安装完成后: nodejs.npm都会安装好,path环境变量也自动设 ...

  7. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  8. electron 入门小白贴

    electron 入门小白贴 electron demo 跑起来! 毕设准备是做个 跨平台的做题的客户端,打算用 electron 来弄. 然而今天折腾了半天才终于吧demo给跑起来了.经历了许多的问 ...

  9. Linux下Electron的Helloworld

    什么是Electron Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromi ...

  10. Electron Angular 开发小记

    一介绍 electron分为主进程和渲染进程,主进程负责和原生交互,控制窗口等. 渲染进程就是普通网页.主进程和渲染进程可以通过ipcMain(主进程使用)及ipcRenderer(渲染进程用)通信 ...

随机推荐

  1. Hg(Mercurial)版本管理学习

    1.关闭分支,首先切到你要关闭的分支 hg commit --close-branch -m. 2.仓库ip地址改变之后,重设仓库ip 找到.hg文件夹 - hgrc文件 - 记事本打开重设 3.推分 ...

  2. (一)jQuery EasyUI 的EasyLoader载入原理

    1.第一次看了官网的demo.引用的是EasyLoader.js文件,而不是引用jquery.easyui.min.js文件,我就有疑问了,百度一下. jQuery EasyUI是一款基于JQuery ...

  3. yum 报错 Error: rpmdb open failed

    # yum list rpmdb: unable to join the environment error: db3 error() from dbenv->open: Resource te ...

  4. Rewrite MSIL Code on the Fly with the .NET Framework Profiling API

    http://clrprofiler.codeplex.com/ http://blogs.msdn.com/b/davbr/archive/2012/11/19/clrprofiler-4-5-re ...

  5. ubuntu图形界面调出命令行

    新安装的ubuntu12.04在左边的快捷方式里默认是没有终端图标的,可以使用如下方法打开终端: 使用ctrl+alt+t.这个组合键适合ubuntu的各种版本.但是,在使用KVM虚拟机时可能会出现问 ...

  6. 简单的图形学(二)——材质与反射

    在上一篇[游戏框架系列]简单的图形学(一)文章中,我们讲述了光线追踪的一个最简单的操作--依每个像素延伸出一条追踪光线,光线打到球上(产生交点),就算出这条线的长度,作为最终的灰度,打不到球上,就显示 ...

  7. solr进阶九:solr对数字和单个字符的搜索

    solr中配有分词器,但分词器里面有大写转换为小写的过滤器时,数字就会被过滤.比如123中国ABC.123就会被过滤掉了,所以才查1|12|123都会失败. <Solr 数字字符不能搜索的一个问 ...

  8. PLSQL Developer新手使用教程(图文教程)

    PLSQL Developer是Oracle数据库开发工具,很牛也很好用,PLSQL Developer功能很强大,可以做为集成调试器,有SQL窗口,命令窗口,对象浏览器和性能优化等功能,下面简单的介 ...

  9. iOSGCD的使用以及死锁的问题

    死锁一直都是在使用多线程时,需要注意的一个问题.以前对同步.异步,串行.并行只有一个模糊的概念,想想也是时候整理一下了.再看看之前的博客,已经很久没有干货了[说得好像之前有干货一样],所以,这篇博客, ...

  10. iOS状态栏详解(隐藏)

    状态栏的隐藏 状态栏的隐藏主要有两种方法:方法一:通过代码控制 @interface UIApplication(UIApplicationDeprecated) // Setting statusB ...