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~
最新文章
- codeforces 731C(DFS)
- HashMap 和 HashTable区别
- TextView所有属性
- 微信企业号开发--手机删除键keyup事件无效
- Linux分类笔记(一)-权限管理
- Colored Sticks (字典树哈希+并查集+欧拉路)
- PHP中zlib扩展实现GZIP压缩输出各种方法总结
- redis数据结构HyperLogLog
- windows 数据类型转换为 dotnet 数据类型
- hdu 2454 Degree Sequence of Graph G (推断简单图)
- xml常用四种解析方式优缺点的分析×××××
- SQL 软解析和硬解析详解
- 5.移植uboot-设置默认环境变量,裁剪,并分区
- HDFS之RPC机制
- mybatis-generator 自动生成mapper以及实体类
- u3d常用代码小集合
- 使用ASP.NET Core2.2创建WebApp
- Controller Plane
- SecureCRT的脚本+快捷键设置
- google的几道面试题